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

I believe "vue-i18n": "^8.22.1" (git) you are using is not compatible with Vue 3 due to a major changes how Vue 3 works with regards to plugins (not very clear from the readme for sure). You can try vue-i18n-next which is Vue 3 "ready" but still in beta stage....

Also, when using v8.x with Vue 2, be sure to create instance with new keyword - const i18n = new VueI18n() (it's a class)

...if you are new to Vue, it would be probably better for you to work with Vue 2. Vue 3 is pretty new (released few days ago) and most of the ecosystem (all sorts of plugins and component libraries) is not ready for it yet. And you probably don't need all the new stuff. Start with v2, enjoy it's stable ecosystem and lots of learning resources on the internet and switch to v3 when all the tools you need make transition to v3 ....

Answer 2

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

<template>
  <div>
    <select v-model="lang">
      <option value="en">English</option>
      <option value="ar">العربية</option>
      <option value="es">Español</option>
    </select>

    <h2>{{ $t("message.greeting", {}, { locale: lang }) }}</h2>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lang: "en",
    };
  },
};
</script>

EXAMPLE