Vue.js:597 [Vue Warn]: Property Or Method "$t" Is Not Defined

I am trying to implement vue-i18n Vue-i18n Github and I 'have got an error : vue.js:597 [Vue warn]: Property or method '$t' is not defined My vuejs 2 app is working fine until I

Solution 1:

You have to specify i18n in any Vue instance you want vue-i18n to work.

The first instance you have has no i18n specified.

Besides, you have two Vue instances, they don't work together, so what you probably need is just one (with i18n specified).

<div id="app">
  <p>{{ $t("message.hello")}}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script>
  // Ready translated locale messages
  const messages = {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界'
      }
    }
  }
  // Create VueI18n instance with options
  const i18n = new VueI18n({
    locale: 'ja', // set locale
    messages, // set locale messages
  })
  // Create a Vue instance with `i18n` option
  const app = new Vue({
    el: '#app',
    i18n, // this is equivalent to `i18n: i18n,` (without quotes, naturally)
    data: {
      products: [
        'Boots',
      ]
    },
  })
  // Now the app has started!
</script>