多言語サイトを構築する

Kurocoを利用したプロジェクトで、多言語に対応したサイトの構築方法について説明します。
今回は例としてKurocoとNuxt.jsで、コンテンツ一覧ページを作成するで作成した/news/のページを多言語対応します。

備考

このページはKurocoとNuxt.jsでのプロジェクトが構築済みであり、コンテンツ一覧のページが作成されていることを前提としています。まだ構築していない場合は、下記のチュートリアルを参照してください。 Kurocoビギナーズガイド
 KurocoとNuxt.jsで、コンテンツ一覧ページを作成する

備考

本チュートリアルでは以下のバージョンでコードを書いています。
Nuxt2: v2.15.8
Nuxt3: v3.8.0

1. パッケージのインストール

ターミナルで対象のプロジェクトのディレクトリへ移動後、下記を実行します。

Nuxt2
Nuxt3

nuxt-i18nをインストールします。

npm i nuxt-i18n

@nuxtjs/i18nをインストールします。

npx nuxi@latest module add i18n

2. localeファイルの作成

次にlocalesのフォルダを作成し、対応する言語毎のlocaleファイルをjson形式で保存します。
今回は英語・日本語の言語に対応させるため、locales/en.json と、locales/ja.json のファイルを作成します。

fetched from Gyazo localeファイルの中身はそれぞれ下記のように記述します。(項目は必要に応じて追加してください。)

/locales/en.json
{
  "links": {
    "home": "Home",
    "news": "News",
    "en": "English",
    "ja": "Japanese"
  },
  "news": {
    "title": "front_kuroco_sample_support"
  }
}

/locales/ja.json
{
  "links": {
    "home": "ホーム",
    "news": "お知らせ",
    "en": "英語",
    "ja": "日本語"
  },
  "news": {
    "title": "フロントKurocoサンプル"
  }
}

3. nuxt.config.js 修正

nuxt.config.jsのmodulesの項目に下記の記述を追加します。

Nuxt2
Nuxt3

nuxt.config.js
modules: [
   [
      'nuxt-i18n',
      {
        strategy: 'prefix_and_default',
        // 切り替える言語を定義
        locales: [
          { code: 'ja', file: 'ja.json' },
          { code: 'en', file: 'en.json' },
        ],
        // デフォルトの言語を設定
        defaultLocale: 'ja',
        vueI18nLoader: true,
        lazy: true,
        // jsonファイルを保存したディレクトリを指定
        langDir: 'locales/',
      },
    ],
    ...
  ],

nuxt.config.js
modules: [
    [
      "@nuxtjs/i18n",
      {
        strategy: "prefix_and_default",
        // Define the language options
        locales: [
          { code: "ja", file: "ja.json" },
          { code: "en", file: "en.json" },
        ],
        // Set the default language
        defaultLocale: "ja",
        vueI18nLoader: true,
        lazy: true,
        // Specify the directory for the JSON file
        langDir: "locales/",
      },
    ],
    ...
  ],

以上で多言語を利用する準備が整いました。

4. 言語切り替えボタンの作成

続いて、言語切り替えボタンを作成します。
コードは流用できるよう流用できるよう components フォルダに LanguageSwitcher.vue のファイルを作成し、こちらに記述します。

/components/LanguageSwitcher.vueを下記のように作成します。

/components/LanguageSwitcher.vue
<template>
  <div>
    <nuxt-link :to="switchLocalePath('en')">{{ $t('links.en') }}</nuxt-link>
    |
    <nuxt-link :to="switchLocalePath('ja')">{{ $t('links.ja') }}</nuxt-link>
  </div>
</template>

<script>
export default {};
</script>

また、/pages/news/index.vue の記述を次のように変更し、ボタンの確認をします。
localeファイルで設定した文章は{{ $t('news.title') }}の記述で表示が可能です。

 <template>
   <div>
-    <p>News list</p>
+    <LanguageSwitcher />
+
+    <h1 class="title">{{ $t('news.title') }}</h1>
     <div v-for="n in response.list" :key="n.slug">
       <nuxt-link :to="`/news/${n.topics_id}`">
         {{ n.ymd }} {{ n.subject }}