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

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

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

しかしそれらは１年以上前のものだったりして少々古く、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/