Per-component translations

If you'd like to define translations per-page or per-component you can take advantage of the vue-i18n-loader. Simply set vueI18nLoader option to true and @nuxtjs/i18n will configure and enable the loader for you, including support for Yaml syntax in the i18n blocks.

i18n: {
  vueI18nLoader: true
}

You can now define translations using custom blocks in your Vue files:

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界!"
  }
}
</i18n>

<template>
  <p>{{ $t('hello') }}</p>
</template>

or using the Yaml syntax:

<i18n lang="yaml">
en:
  hello: 'hello world!'
ja:
  hello: 'こんにちは、世界!'
</i18n>

<template>
  <p>{{ $t('hello') }}</p>
</template>