Internationalization
For internationaliztion supastarter integrates nuxt/i18n.
Why nuxt/i18n:
nuxt/i18n is a lightweight internationalization library based on
vue-i18n especially designed to leverage Nuxt
3 features (auto-imports, file-based route generation, etc.). It also supports
automatic language detection and url based language routing.
Usage
In Vue components, you can use the auto-imported composable useTranslations(). This composable exposes the useI18n() composable from nuxt/i18n and adds types for the translation keys.
<script setup lang="ts">
const { t } = useTranslations();
</script>
<template>
<div>{{ t('hello') }}</div>
</template>Localized Links
nuxt/i18n also auto-imports useLocalePath(), a useful composable to generate localized links.
If you want to use a link, the auto-imported component <NuxtLinkLocale> is built on top of <NuxtLink>
but changes the default behavior by internally using localePath() to make it easier to link to localized routes.
<template>
<NuxtLinkLocale to="/">{{ $t('home') }}</NuxtLinkLocale>
</template>is equivalent to
<script setup lang="ts">
const localePath = useLocalePath();
</script>
<template>
<NuxtLink :to="localePath('/')">{{ $t('home') }}</NuxtLink>
</template>Translations
Translations are stored in the packages/i18n/translations folder. They are organized by locale and scope:
packages/i18n/translations
├── en
│ ├── shared.json # Shared translations across all apps
│ ├── saas.json # SaaS app translations
│ ├── marketing.json # Marketing app translations
│ └── mail.json # Email template translations
├── de
│ ├── shared.json
│ ├── saas.json
│ ├── marketing.json
│ └── mail.json
└── ...{
"hello": "Hello World!"
}Add a new locale
To add a new locale you need to create a new folder in the packages/i18n/translations directory with the locale code as the folder name. For example fr for French. Then create the translation files for each scope:
{
"hello": "Bonjour le monde!"
}Then register this locale in the i18n config file:
export const config = {
locales: {
fr: {
label: "Français",
currency: "EUR",
},
// ...
},
defaultLocale: "en",
defaultCurrency: "USD",
localeCookieName: "NEXT_LOCALE",
} as const satisfies I18nConfig;