I18n

If you want to support multiple languages in your project. Vuesion has some useful tools to make it easier to manage your translations.

Default locale and supported locales

To tell the tooling which locale is your default locale you have to define it in the file: ./nuxt.config.ts.

You can also add as many other locales as you want to support. The extract-i18n-messages script will add these translation files with the default messages defined for the default locale.

Example config:

...
// Don't forget to update the extract-i18n-script
locales: [
    { code: 'en-US', iso: 'en-US', file: 'en-US.json', isCatchallLocale: true },
    { code: 'de-DE', iso: 'de-DE', file: 'de-DE.json' },
],
...

Define and extract default messages

Open up a file, e.g. ./src/pages/index.vue:

<template>
    <vue-stack space="0" as="main">
        <landing-page-hero-section />
      ...
    </vue-stack>
</template>

and add a translation for our default locale (en-US):

<template>
    <vue-stack space="0" as="main">
        {{ $t('home.test' /* this is a test!!! */) }}
        <landing-page-hero-section />
        ...
    </vue-stack>
</template>

Now run npm run extract-i18n-messages and go to http://localhost:3000/ (opens new window).

You should see the message this is a test!!! one the top-left of the screen.

If you open up the file ./i18n/en-US.json you should see a new key with the default message as value:

{
...
  "home.test": "this is a test!!!"
}

You should also see that the file ./i18n/de-DE.json has the exact same key and value added.

Let's translate it into German:

{
...
  "home.test": "das ist ein Test!!!"
}

and run npm run extract-i18n-messages again.

The translated value is not overwritten because it is not the default locale.

If you change the default message in your Vue component:

<template>
    <vue-stack space="0" as="main">
        {{ $t('home.test' /* this is not a test!!! */) }}
        <landing-page-hero-section />
        ...
    </vue-stack>
</template>

and run npm run extract-i18n-messages again.

You will have a new value in ./i18n/en-US.json:

{
...
  "home.test": "this is not a test!!!"
}

but the value in ./i18n/de-DE.json will stay the same:

{
...
  "home.test": "das ist ein Test!!!"
}

Known limitations

If you want to add HTML to your default messages inside a template, you have to use [] instead of <> e.g.:

<template>
  <div>
    <div v-html="$t('home.link' /* [a href='https://example.com' target='_blank']this is a link[/a] */)" />
    ...
  </div>
</template>