How to fix Vue I18n Uncaught TypeError: Cannot read property 'config' of undefined

I've been working on a Vue.js app that needs to be localized in multiple languages. For Vue.js, the best module to implement i18n is Vue.js I18N. After the installation, I tried to initialize it just as described in the documentation, however, I missed something out in my code and ended up with this exception: Uncaught TypeError: Cannot read property 'config' of undefined.

The following code will trigger the mentioned exception in any Vue app:

// main.js
// Example of regular VueJS app with translation
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// 1. Import i18n
import VueI18n from 'vue-i18n';

// 2. Create VueI18n instance with options
const i18n = new VueI18n({
    // set locale
    locale: 'en',
    // set locale messages
    messages: {
        en: {
            message: {
                hello: 'hello world'
            }
        },
        ja: {
            message: {
                hello: 'こんにちは、世界'
            }
        }
    }
});

Vue.config.productionTip = false;

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

If you are facing the same exception, you are probably doing the same with the code. You import the i18n module, create a new instance and inject it to the Vue instance. However, you forgot to instruct Vue.js to use the new module. To fix this error, simply indicate that Vue should use the the Vue I18N module before creating the instance like this:

// 1. Import the library
import VueI18n from 'vue-i18n'

// 2. Important! Just right before initializing the I18n instance, use the module
Vue.use(VueI18n)

// 3. Create I18n instance
const i18n = new VueI18n({
    // ...
});

// 4. Load into vue
new Vue({
    i18n,
    render: h => h(App)
}).$mount("#app");

The final code without this tedious exception will look like this:

// main.js
// Example of regular VueJS app with translation
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// 1. Import i18n
import VueI18n from 'vue-i18n';

// 2. Just right before initializating the I18n instance, use the module
Vue.use(VueI18n)

// 3. Create VueI18n instance with options
const i18n = new VueI18n({
    // set locale
    locale: 'en',
    // set locale messages
    messages: {
        en: {
            message: {
                hello: 'hello world'
            }
        },
        ja: {
            message: {
                hello: 'こんにちは、世界'
            }
        }
    }
});

Vue.config.productionTip = false;

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

Happy coding ❤️!