# I18n

Usually, you want to support multiple languages in your project. In order to make it easy, vuesion has some useful tools to help you manage your translations.

# Default locale and supported locales

To tell your tooling which locale is your default locale (that can be overwritten by defining default messages for translation keys) you have to define it in the file: ./vuesion/config.json.

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.

e.g.

  "i18n": {
    "defaultLocale": "en",
    "supportedLocales": ["en", "de", "pt", "zh-cn"]
  },

# Define and extract default messages

Let's see how this whole i18n thing works.

You have already defined your default locale and supported locales, now you want to add translations to your application.

Open up a file, e.g. ./src/app/home/Home/Home.vue:

<template>
  <div>
    <stage :disable-particles="disableParticles" />
    ...
  </div>
</template>

and add a translation for our default locale:

<template>
  <div :class="$style.home">
    <stage :disable-particles="disableParticles" />
    {{ $t('home.test' /* this is a test!!! */) }}
    ...
  </div>
</template>

Now run npm run extract-i18n-messages and go to http://localhost:3000/.

You should see the message this is a test!!! left in the middle of the screen.

If you open up the file ./i18n/en.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.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>
  <div :class="$style.home">
    <stage :disable-particles="disableParticles" />
    {{ $t('home.test' /* this is not a test!!! */) }}
    ...
  </div>
</template>

and run npm run extract-i18n-messages again.

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

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

but the value in ./i18n/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 :class="$style.home">
    <stage :disable-particles="disableParticles" />
    <div v-html="$t('home.link' /* [a href='https://example.com' target='_blank']this is a link[/a] */)" />
    ...
  </div>
</template>