Internationalization

For internationaliztion supastarter integrates nuxt/i18n.

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. The default locale is en and the translations are stored in en.json.

{
  "hello": "Hello World!"
}

Add a new locale

To add a new locale you need to create a new file in the packages/i18n/translations folder with the locale name as the file name. For example fr.json for French.

{
  "hello": "Bonjour le monde!"
}

Then register this locale in the global config.ts file:

// ...
i18n: {
  locales: {
    fr: {
      label: "Français",
      numberFormats: {
        currency: {
          style: "currency",
          currency: "EUR",
          notation: "standard",
        },
        number: {
          style: "decimal",
          maximumFractionDigits: 0,
        },
        percent: {
          style: "percent",
          useGrouping: false,
        },
      },
    },
    // ...
  },
  // ...
},
// ...