Nuxt.js 多言語対応Nuxt-i18nの簡単な使い方

Nuxt.js 多言語対応Nuxt-i18nの簡単な使い方

nuxt-i18nを利用して簡単に多言語対応を実現するサンプルコード

環境

  • OS  Ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js v2.10.2

nuxtインストール

nuxt-i18n-testという名前でプロジェクトを作成

UIにbulmaを選択

nuxt-i18nインストール

下記のコマンドでインストール

nuxt-i18n使い方

利用方法も簡単。今回は英語、日本語、中国語で「Hello World」と「home」を表示します。

nuxt.config.jsのmodulesに下記を追加します

次にindex.vueを下記の通りに編集します。

たったこれだけで、多言語対応が可能です。

yarn dev で起動して、ブラウザから http://プライベートIP:3000 にアクセスすると多言語対応がされています。