Error in render: "TypeError: _vm.$t is not a function" - Property or method "$t" is not defined on the instance but referenced during render

Question

I'm using Vuetify (v2.3.13) and I want to install multilanguage with vue-i18n (v9.1.0).

I'm developing in Javascript and use option API for my component.

My main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import './plugins'
import store from './store'
import { sync } from 'vuex-router-sync'

Vue.config.productionTip = false

import { createI18n } from "vue-i18n";
import en from "./locales/en.json";
import pt from "./locales/pt.json";

sync(store, router)

// Create VueI18n instance with options
const i18n = new createI18n({
  locale: "en",
  fallbackLocale: "en",
  messages: { pt, en },
});

new Vue({
  router,
  vuetify,
  store,
  i18n,
  render: h => h(App),
}).$mount('#app')

My json file where the translation will be en.json:

{
  "languages": {
    "pt": "Portuguese",
    "en": "English"
  },
  "title": {
    "config": "Configuration"
  }
}

I want to call my dictionnary in my component but I have these errors: Error in render: "TypeError: _vm.$t is not a function" and Property or method "$t" is not defined on the instance but referenced during render.

My component:

<template>
  <h2>{{ $t('title.config') }}</h2>
<div>
    <select v-model="lang">
      <option value="en">English</option>
      <option value="pt">Portugeuse</option>
    </select>
</div>
</template>
<script>
  export default {
     name: 'MyComponent',
     data: () => ({
      lang: "en"
    })
}
</script>

As I understand, I need to initialize or import the dictionnary into my component ? Or my component doesn't understand the $t because the internationalization is not installed well ?

How should I initialize the dictionary in my component ?

Answer 1

Vue I18n v9 works with Vue 3, with Vue 2, you need to use v8. After installing the module, I think you only have to replace

const i18n = new createI18n({

with

const i18n = new VueI18n({

and update the import accordingly. But with the correct version, the documentation should work as expected.