Vue.js 3 - Error while using VueI18n plugin in vue - Cannot set property '_vm' of undefined

Question

I\'ve just started working with Vue.js and learning it through some online code snippet and tutorials. I\'m trying to implement internationalization support for my vue proje

Answer 1

You should install vue-i18n@next which is compatible with Vue 3:

 npm install --save vue-i18n@next

or via using yarn

yarn add vue-i18n@next

Basic usage :

import { createApp } from "vue";
import App from "./App.vue";

import { createI18n } from "vue-i18n";

const i18n = createI18n({
  legacy: false,
  locale: "ja",
  messages: {
    en: {
      message: {
        language: "English",
        greeting: "Hello !"
      }
    },
    ar: {
      message: {
        language: "العربية",
        greeting: "السلام عليكم"
      }
    },
    es: {
      message: {
        language: "Español",
        greeting: "Hola !"
      }
    }
  }
});

createApp(App).use(i18n).mount("#app");

App.vue

EXAMPLE