Internationalization in vuejs, vue cli, spa

Multi language support in vuejs application can easily achieved by using the vuei18n plugin.
All you need to do is just  follow below steps.
My base app is created using vue cli you can





check the details here how to create vue cli app Vue CLI

Step 1:
Include the vue18n plugin in your package.json file dependencies section

"vue-i18n": "8.4.0"

next step is yarn/npm install of the same to your project.

Step 2: Create a resources.ts file in src folder.

export const resources = {
    en : {
        company_name: 'JuggerNaut',
    },
    ml : {
        company_name: 'ജഗ്ഗർനട്ട്',
    },
    cn : {
        company_name: '剑圣',
    },
};

Step 3:

Now in main.ts add the reference for resource and vue-18n libraray

import VueI18n from 'vue-i18n';
import {resources} from '@/i18n/resources';
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages: resources, // set locale messages
});

I have added the default language as 'en'
Now include it in the Vue instance creation part like below

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

Step 4:
That's it the configuration part is done now we can go to the components and use it.

I am biding the company name inside my html. this can be converted like below using resource file.

<li><a href="#">{{$t('company_name')}}</a></li>

If you want to use inside your component you can use it like below.

const companyName = this.$t('company_name') as string;

And if you want to change the language dynamically just set like below in your component

this.$i18n.locale = 'ml';

It will convert to that corresponding language.