JavaScript
I18n
Vue.js
nuxt.js

NuxtJSの国際化にはnuxt-i18nを使おう

現在日本語の記事ではNuxtJS上でvue-i18nを使って国際化を行う方法のみ説明されています。

しかしそれらは1年以上前のものだったりして少々古く、2018年10月現在ではnuxt-i18nというnuxt用にvue-i18nを拡張したプラグインが開発されています。

なので今回はこのnuxt-i18nを使って国際化を行ってみたいと思います。


前準備: Nuxtプロジェクトの作成

以下設定でNuxtプロジェクトを作成します(Project Name以外デフォルト)

$ create-nuxt-app

> Generating Nuxt.js project in /Users/wildmouse/develop/practice
? Project name nuxt-with-i18n
? Project description My mind-blowing Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module no
? Use eslint no
? Use prettier no
? Author name (wildmouse)
? Choose a package manager npm

プロジェクトの作成が完了したらcd nuxt-with-i18nで移動し、準備完了。


nuxt-i18nの追加

次にnuxt-i18nのインストールを実行。

$ npm install --save nuxt-i18n

でインストールが完了します。


nuxt-i18nの設定

インストールが完了したらnuxt.config.jsに設定を追加していきます。


nuxt.config.js

modules: [

['nuxt-i18n', {
locales: [
{ code: 'ja', iso: 'ja_JP' },
{ code: 'en', iso: 'en-US' },
],
defaultLocale: 'ja',
vueI18n: {
fallbackLocale: 'ja',
},
vueI18nLoader: true
}]
],


国際化させる文章を登録

プロジェクトでの設定が完了したら、次に個々のページで対応化させたい単語・文章の登録をします。

各vueファイルの<template>上部に<i18n>タグを追加し、JSON形式で記述することで国際化が可能になります。


index.vue

<i18n>

{
"ja": {
"hello": "こんにちは世界"
},
"en": {
"hello": "Hello World"
},
}
</i18n>


国際化した文言を表示させる

文言が登録できればあとはtemplate側で使用すればOK。


index.vue

<template>

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

npm run devを叩いて http://localhost:3000 にアクセスすると、こんにちは世界と表示されているのが確認できるはずです。


参考

https://github.com/kazupon/vue-i18n-loader

http://kazupon.github.io/vue-i18n/