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.
nuxt.config.js
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>
Read more about
i18n
blocks in https://kazupon.github.io/vue-i18n/guide/sfc.html.