# 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>