Internationalization

Overview

Internationalization (i18n) is a cornerstone of modern e-commerce: it enables you to reach customers in their native language, present content tailored to regional conventions (dates, numbers, addresses) and automatically format prices in the appropriate currency. A seamless i18n experience not only boosts user trust and engagement, but also simplifies operations across multiple markets. SCAYLE Storefront harnesses the power of Nuxt together with the @nuxtjs/i18n module to deliver a tested i18n foundation.

Key Features

Out of the box, SCAYLE Storefront comes with the following capabilities:

Serve each locale on its own domain (e.g. example.de) or URL prefix (e.g. /de/)
Language switcher component
Leverage the native JavaScript Intl API for currency, number and date formatting out of the box
Automatically detects a user’s region and redirects to the appropriate locale.
Support for multiple countries and languages

In addition to this, SCAYLE Storefront includes a comprehensive set of translations, for the following locales available by default:

🇧🇬 Bulgarian (bg_BG)
🇨🇿 Czech (cs_CZ)
🇩🇰 Danish (da_DK)
🇩🇪 German (de_DE)
🇬🇷 Greek (el_GR)
🇬🇧 English UK (en_GB)
🇺🇸 English US (en_US)
🇪🇸 Spanish (es_ES)
🇪🇪 Estonian (et_EE)
🇫🇮 Finnish (fi_FI)
🇫🇷 French (fr_FR)
🇭🇺 Hungarian (hu_HU)
🇮🇹 Italian (it_IT)
🇱🇹 Lithuanian (lt_LT)
🇱🇻 Latvian (lv_LV)
🇳🇱 Dutch (nl_NL)
🇳🇴 Norwegian Bokmål (nb_NO)
🇵🇱 Polish (pl_PL)
🇵🇹 Portuguese (pt_PT)
🇷🇴 Romanian (ro_RO)
🇸🇰 Slovak (sk_SK)
🇸🇮 Slovenian (sl_SI)
🇸🇪 Swedish (sv_SE)
🇹🇷 Turkish (tr_TR)

All provided translations should be verified and, if necessary, adapted to your project’s terminology and style guide.

Configuration

To effectively serve diverse markets, it's crucial to configure dedicated shops tailored to each target audience. This includes customizing language, currency, and routing behavior. The Configuration Guide offers a comprehensive overview of all available options.

Translations

To maintain accurate and consistent translations, it is essential to adhere to the Translations Guide. This guide facilitates a standardized approach to translation, ensuring that all language versions are aligned with the project's terminology and style guide. By meticulously following these guidelines, teams can produce translations that are easily manageable and updatable, reducing discrepancies and improving overall quality.

Currency and Tax Handling

Product prices are sourced directly from the Storefront API, determined by the configured shopId, and are already denominated in the currency set for that shop within the SCAYLE Panel. The Storefront does not perform any currency conversion; instead, it uses the locale and currency from its configuration solely for display formatting, utilizing the useFormatHelpers composable.

All core tax calculations and logic are managed within the SCAYLE Panel system, and the prices returned by the API already reflect these tax rules. The Storefronts’s responsibility is to display these prices as provided, without additional tax computation.

Any tax-related display text (such as “Includes VAT”) should be managed through translation keys, which may require different values for each locale or region. If there are complex, country-specific tax display requirements not covered by the API or Storefront, these must be implemented by the tenant.

Usage in Components

To provide a localized user experience, Vue components use translation functions and locale-aware formatting helpers. The $t function, provided by @nuxtjs/i18n, is used to fetch translated strings based on the current locale. For example, to display a translated product label and a tax notice:

For locale-aware currency formatting, use the useFormatHelpers and useFormatDate composable, which automatically applies the correct format based on the current shop's locale and currency:

The <CountrySwitcher /> component allows users to select their country or region, which adjusts the locale, currency, and shop context across the site. This ensures prices, translations, and tax information are tailored to the selected location. Integrating the component is easy:

Configuration Opportunities

To explore SCAYLE configuration options available to you, please check out our Internationalization Configuration Guide.