#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
  • vuejs

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ
javascript reduce 連想配列の合計計算覚えよう
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
vuejs v-if と v-show の違い
vue hook 使って vuejs コンポーネントライフサイクル監視
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
nuxtjs vue router params query ルートから取得できるもの
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
値段をカンマと円マーク表示 vuejs money-format filter 自作
vuejs スクロールでナビバー表示非表示
vuejs 開発時に遭遇したエラーリスト
nuxt cordova web ハイブリッドアプリ作成した時のメモ
vuejs で omisejapan の決済フォーム作成した時のメモ
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
laravel vuejs 初期設定