くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt.js > nuxt-i18nでNuxt.jsの国際化して、英語版と日本語版を用意する

nuxt-i18nでNuxt.jsの国際化して、英語版と日本語版を用意する

Nuxt.js Vue.js i18n

Nuxt.jsでアプリ作るけど、やっぱり国際化大事。英語版と日本語版は作っておきたい。。
nuxt-i18nを使うと簡単に多言語対応できたので、その時の備忘録。

インストール

$ npm install --save nuxt-i18n

設定

modules: [
  ['nuxt-i18n', {
    strategy: "prefix_and_default", // デフォルトのlangも言語指定のパスを生成する設定
    locales: [
      { code: 'ja', iso: 'ja_JP' },
      { code: 'en', iso: 'en_US' },
    ],
    defaultLocale: 'ja',
    vueI18n: {
      fallbackLocale: 'ja',
      messages: {                        // メッセージはここで設定
        "en": {
          "hello": "HELLO"
        },
        "ja": {
          "hello": "ハロー"
        }
      }
    }
  }]
],

用意したメッセージを表示する

テンプレート上

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

SCF上

export default {
  methods: {
    get_message() {
      return this.$t.bind(this)("hello");
    }
  }
}

localeを考慮したルーティング

テンプレート上
<nuxt-link :to="localePath('index')" />
SCF上で$router.push()
export default {
  methods: {
    go_to_index() {
      this.$router.push(this.localePath("index"));
    }
  }
}
midlleware上でredirect()
export default function({ app, redirect }) {
  redirect(app.localePath("index"));
}

小ネタ集

Vuetifyと一緒に使うときは、seoオプションを無効にして、自分でマージする

VuetifyでThemeを設定しているときは、seoオプションを無効にしないといけないぽい。
VuetifyはThemeを考慮したcssがheadに追加するが、nuxt-i18nがそれを消してしまう。

なので、nuxt.config.jsでseoオプションをOFFにして、自分でマージすればOK

// nuxt.config.js
modules: [
  [ "nuxt-i18n", {
    seo: false,
  }]
],

// layouts/default.vue

export default {
  head () {
    const i18nSeo = this.$nuxtI18nSeo()
    return {
      htmlAttrs: {
        // My HtmlAttrs
        ...i18nSeo.htmlAttrs
      },
      meta: [
        // My Metas
        ...i18nSeo.meta
      ],
      link: [
        // My Links
        ...i18nSeo.link
     ]
    }
  }
}

ブラウザの言語を検出する

nuxt-i18nは、デフォルトで、ブラウザの言語を検出して、いい感じにリダイレクトしてくれる。
これを制御するオプションがdetectBrowserLanguage。

// nuxt.config.js

['nuxt-i18n', {
  detectBrowserLanguage: {
    useCookie: true, // 検出・設定した言語をクッキーに保存する設定
    cookieKey: 'i18n_redirected' // クッキーのキー名
  }
}]

クッキーを使わずに、毎回検出してほしい場合は、useCookieをfalseにする。

// nuxt.config.js

['nuxt-i18n', {
  detectBrowserLanguage: {
    useCookie: false
  }
}]

そもそもブラウザの言語を検出してほしくなければ、detectBrowserLanguage自体をfalseにする

// nuxt.config.js

['nuxt-i18n', {
  detectBrowserLanguage: false
}]

メッセージをSCFに書けるようにする

// nuxt.config.js

modules: [
  ['nuxt-i18n', {
    // ...
    vueI18nLoader: true // vue-i18n-loaderを有効にする
  }]
],

<i18n>
{
  "en": {
    "hello": "HELLO"
  },
  "ja": {
    "hello": "ハロー"
  },
}
</i18n>
<template>
  <div>{{ $t("hello") }}</div>
</template>

メッセージを別ファイルにする

// message.json
{
  "en": {
    "hello": "HELLO"
  },
  "ja": {
    "hello": "ハロー"
  },
}

<i18n src="./message.json"></i18n>
<template>
  <div>{{ $t("hello") }}</div>
</template>

サイトマップもi18n対応する

@nuxtjs/sitemapを使うだけ。ただ、nuxt-i18nのあとに設定する必要がある。
'nuxt-i18n'がrouteを生成したあとに、sitemapを作らないといけない。

modules: [
  ['nuxt-i18n', {
    locales: [
      { code: 'ja', iso: 'ja_JP' },
      { code: 'en', iso: 'en-US' },
    ],
  }],
  "@nuxtjs/sitemap"
],

以上！！

参考にしたサイト様