javascript - vue.js:597 [Vue warn]: Property or method "$t" is not defined - Stack Overflow

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 add the getting starded code, where am I wrong? Thanks in advance

<div id="app">
  <p>{{ $t("message.hello")}}</p>
</div>

<script src=""></script>
<script src=".js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      products: [
   'Boots',
  ]
   },
  })
</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
  new Vue({ i18n }).$mount('#app')
// Now the app has started!
</script>

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 add the getting starded code, where am I wrong? Thanks in advance

<div id="app">
  <p>{{ $t("message.hello")}}</p>
</div>

<script src="https://unpkg./vue"></script>
<script src="https://unpkg./vue-i18n/dist/vue-i18n.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      products: [
   'Boots',
  ]
   },
  })
</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
  new Vue({ i18n }).$mount('#app')
// Now the app has started!
</script>

• javascript
• vue.js
• vuejs2
• vue-i18n

Share Improve this question Follow asked Apr 11, 2018 at 12:53 Emile CanteroEmile Cantero 2,06366 gold badges2626 silver badges4848 bronze badges 1

• Why do you have 2 instance of Vue, both mounting on #app? You can remove the first one and move your data to the one with the translations. – thefallen Commented Apr 11, 2018 at 13:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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./vue"></script>
<script src="https://unpkg./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>