Help us understand the problem. What is going on with this article?

Vue.jsではじめる多言語対応

More than 1 year has passed since last update.

調べながら書いたので間違っていたらスミマセンmm

方法 / 前提

  • フロントのFWはVue.jsを採用。
  • 言語対応の方法としてi18nという国際規格を採用。
    • Vue.jsのi18nプラグイン -> https://github.com/kazupon/vue-i18n
      ( ※ kazuponさんという日本のVue.js界隈で有名な方が作成したものを推奨 / こまめにメンテされている)

具体的な書き方

サンプルがたくさんあるので、下記を見ればすぐ分かる
https://github.com/kazupon/vue-i18n/blob/dev/examples/

vue.script.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';

const data = require('./message.json');

// 言語の設定
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'ja', // デフォルト言語はjaにしておくが、ブラウザの言語を拾ってきてここに入れる => 言語変更されたら書き換える
  messages: data
});

// Vueたん
const app = new Vue({
  el: '#app',
  i18n: i18n,
  data: {},
  created() {},
  methods: {
    handleClick_changeLanguage(lang) {
      this.$i18n.locale = lang;
    }
  }
});

翻訳用のjsonファイル

json形式で言語ファイルを作り、言語はここで管理する。
基本的に1ページに対し、1jsonファイルがベスト。(検討中)
jsonデータはサーバ側から貰ってもよい。

message.json
{
  "ja": {
    "message": {
      "title": "タイトルだよーん",
      "subtitle": "ここがサブタイトルになります"
    }
  },
  "en": {
    "message": {
      "title": "title dayo-n",
      "subtitle": "sub title dayo-n"
    }
  },
  "han": {
    "message": {
      "title": "標題",
      "subtitle": "副標題"
    }
  }
}

en.jsonja.jsonのように言語ごとに分けることもできるし、
上記例のmessage.jsonのように英語と日本語を1ファイルで管理することも可能。

component.htmlはこんな感じ

app.component.html
<div id="app">
  <header class="header">
    <div>
      <p class="header__sub-text">{{ $t("message.subtitle") }}</p>
      <h1 class="header__title">{{ $t("message.title") }}</h1>
    </div>
  </header>

  <nav>
    <ul>
      <li><a href="#" v-on:click.prevent="handleClick_changeLanguage('en')">英語</a></li>
      <li><a href="#" v-on:click.prevent="handleClick_changeLanguage('ja')">日本語</a></li>
      <li><a href="#" v-on:click.prevent="handleClick_changeLanguage('han')">繁体字</a></li>
    </ul>
  </nav>
</div>

追記

vue-i18n for Server-Side Rendering も併せて使うと良さそう
https://github.com/kazupon/vue-i18n/tree/dev/examples/ssr

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away