vue-i18nの最小デモ

by ph822720355

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-i18n.global.prod.js"></script>
<main id="i18n">
  <div>
    <label><input type="radio" value="ja" v-model="locale" />日本語</label>
    <label><input type="radio" value="en" v-model="locale" />English</label>
  </div>

  <h1>{{ $t('你好世界3') }}</h1>
</main>

CSS

body {
  padding: 20px;
}

JavaScript

// import vue
// import vue-i18n

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'ja',
  fallbackLocale: 'ja',
  messages: {
    
    "en": {
      你好世界: "Hello World",
      "你好世界2": "Hello World2"
    }
  }
});

new Vue({
  el: "#i18n",
  i18n,
  data() {
    return {
      locale: "ja"
    }
  },
  watch: {
    locale(newLocale) {
      this.$i18n.locale = newLocale;
    }
  }
});