Configuration

Configuration involves defining your available shops and their associated settings, such as locales, currencies, and routing. This setup is primarily managed in two key files:

1. config/shops.ts: This file serves as the central definition point for each shop, specifying details like shopId, locale, currency, and path code.
2. nuxt.config.ts: This main Nuxt configuration file imports the shop definitions from config/shops.ts. It then utilizes this information to configure essential modules, including @scayle/storefront-nuxt and the internationalization module @nuxtjs/i18n.

Understanding how these files interact is crucial for tailoring the storefront's behavior to your specific multi-shop requirements.

Shop configuration

Shop configurations are defined in config/shops.ts , which acts as the base configuration for different aspects of the SCAYLE Storefront, such as basic shop setup, routing, translations, and formatting.

Key properties of a shop entry are:

• shopId: The unique identifier for the shop in SCAYLE.
• locale: A standard locale code (e.g., en-US, de-DE). Used as a basis for the @nuxtjs/i18n configuration.
• currency: The currency code (e.g., USD, EUR). Used as a basis for number formatting configuration.
• code: A string or array of strings used as the basis for generating route paths or domains.
• translationFile: Specifies the translation file (e.g., en_US.json) associated with this locale.
• isDefault: (Optional) Marks one shop as the default.
• countryCode: The country code for the shop region

typescript

Copy

Each shop in your SCAYLE Storefront Application has a one-to-one correspondence with a shop-country. To add a new locale, create its matching shop-country via the Shop Management section of the SCAYLE Panel. The complete guide is available here.

To simplify shop configuration in Storefront, use the npx @scayle/storefront-cli setup command. This automatically generates shop configurations from available shops in the SCAYLE Panel.

For more general shop configuration details, see the SCAYLE Configuration Documentation.

Routing Configuration

To enable multi-shop support, @scayle/storefront-nuxt establishes routing rules based on several key configurations. Central to this are the storefront.shopSelector setting and the specific path or domain properties defined for each shop.

The necessary shop data, including a unique code from which these path or domain attributes are derived, originates in config/shops.ts. This information is then used to populate the runtimeConfig.storefront.shops object, located within the main runtimeConfig.storefront section of your nuxt.config.ts file.

Path Based Routing

If storefront.shopSelector is configured to path or path_or_default, shops are identified by a path prefix in their URL (e.g., example.com/en, example.com/de, example.com/at).

Setting this up requires each shop to have a unique code defined in config/shops.ts. This code is subsequently used within nuxt.config.ts to set the runtimeConfig.storefront.shop['<shopId>'].path option. Furthermore, if a shop in config/shops.ts is configured with multiple code values (as an array), it will be accessible via all corresponding path prefixes.

typescript

Copy

Domain Based Routing

If storefront.shopSelector is configured to domain, each shop is identified by a unique hostname. This can be achieved using different subdomains (e.g., en.example.com, de.example.com, at.example.com) or distinct top-level domains (e.g., example.com, example.de, example.at).

For local development, the settings in config/shops.ts determine the default subdomains, such as en.localhost:3000 and de.localhost:3000. These defaults can be overridden by setting the NUXT_STOREFRONT_SHOPS_<shopId>_DOMAIN environment variable.

For HTTPS support with these *.localhost development domains, suitable SSL certificates can be generated using mkcert. Simply run mkcert "*.localhost" in your project's root directory.

typescript

Copy

See also: SCAYLE Configuration Documentation - Path and Domain.

@nuxt/i18n Configuration

Similar to @scayle/storefront-nuxt, the rest of the Nuxt app needs to be configured to use a matching routing approach. For this @nuxtjs/i18n uses the following options:

• locales: An array defining all supported languages and regions for your application. In this setup, it's dynamically generated from your config/shops.ts file. Each object typically includes a code, language, file, and domain properties.
• differentDomains: A boolean flag is set to true if you are using storefront.shopSelector: 'domain', indicating that different locales/shops are hosted on separate domains.
• detectBrowserLanguage: A boolean flag. When enabled, it tries to automatically redirect the user based on their browser's language settings. Typically, this is disabled in favor of storefront's Country Detection Feature.
• defaultLocale: Specifies the default locale code as a string (e.g., 'en'). This locale serves as a fallback when a locale cannot be determined from the URL. It is automatically set up based on the default shop within config/shops.ts.
• lazy: This boolean flag controls on-demand loading of translation files. Enabling it enhances initial page load performance. It is enabled by default.
• strategy: A string defining how the locale is represented in the URL. Common values are:
  • prefix used for path based routing (storefront.shopSelector: 'path')
  • prefix_except_default used for path based routing, excluding the prefix on the default shop (storefront.shopSelector: 'path_or_default')
  • no_prefix used for domain based routing (storefront.shopSelector: 'domain')

Inside nuxt.config.ts these options are generated using config/shops.ts as the source.

typescript

Copy

For a full overview of all supported options, check out the official @nuxtjs/i18n documentation.