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 nuxt-i18n will configure and enable the loader for you, including support for Yaml syntax in the i18n blocks.

['nuxt-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>