#vuejs i18n の html-lang と font 設定

vue-i18n(opens new window)のインストールなどは割愛
nuxt-i18n(opens new window)も vue-i18n 使っているので、同じことできます。
やり方は$i18n.locale で判断して css と head lang タグの切り替えもっといい方法が知りたい

css class の用意

.lang-ja {
  font-family: "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Hoefler Text",
    "Linux Libertine O", "Yu Mincho", sans-serif;
}
.lang-cn {
  font-family: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
}
.lang-zh {
  font-family: "Noto Sans TC", "PingFang TC", "Hiragino Sans CNS",
    "Microsoft JhengHei", sans-serif;
}

layout で作業した方が楽

<template>
  <div :class="['lang-'+$i18n.locale]">
    <transition-group name="page">
      <Header v-show="show" key="0" />
      <nuxt v-show="show" key="1" />
      <Footer v-show="show" key="2" />
    </transition-group>
  </div>
</template>
<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
export default {
  head() {
    return {
      htmlAttrs: {
        lang: this.$i18n.locale
      }
    };
  },
  components: {
    Header,
    Footer
  },
}

nuxt.config.js の htmlAttrs 設定があればコメントアウト

export default {
  head: {
    // htmlAttrs: {
    //   lang: "ja"
    // },

そんなの関係ねぇけど、nuxt-i18n の nuxt.config.js 設定を

require("dotenv").config();
import ja from "./locales/ja.json";
import cn from "./locales/cn.json";
import zh from "./locales/zh.json";

export default {
  i18n: {
    locales: ["ja", "cn", "zh"],
    defaultLocale: "ja",
    vueI18n: {
      fallbackLocale: "ja",
      messages: {
        ja: ja,
        cn: cn,
        zh: zh,
      },
    },
  },
};

最後
比べ物にならないかもしれませんが、ワードプレスと vue-i18n の多言語対応の読み込み速度の差が 5 倍以上ありました。さすがっす!

2020-08-06
  • javascript
  • vuejs

関連記事

javascript 日本語 shift-js 対応 CSV ダウンロード
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
polyfill という宝物で開発時の ie11 対応した時のメモ
ReferenceError: location is not defined
nodejs 使う時のエラーたち
javascript reduce 連想配列の合計計算覚えよう
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作
vue hook 使って vuejs コンポーネントライフサイクル監視
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
nuxt cordova web ハイブリッドアプリ作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
正規表現一覧 よく使う検索・置換のパターン
開発時によく使うゼロ埋めパディング作業まとめ
javascript 面接問題のいろいろ
vuejs で omisejapan の決済フォーム作成した時のメモ
javascript で作る html から PDF 変換 pdfmake の日本語対応
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
laravel vuejs 初期設定
nuxtjs と codeigniter で jwt システム構築
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay