[Vuejs]-Add lang to an existing Vuejs application

1๐Ÿ‘

I would recommend using vue-i18n since it is easy to set up and flexible for future additions. In order to add it:

npm install vue-i18n

Then, add a new plugin:

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const messages = {   
  en: {     
    message: {       
      hello: 'hello'     
    }   
  },   
  fr: {     
   message: {       
     hello: 'Bonjour'     
   }   
  } 
}
export const i18n = new VueI18n({ locale: 'en', fallbackLocale: 'fr', messages });

After that you can import it in your main.js and add to it inside your vue instance.

import {i18n} from './plugins/i18n';
new Vue({i18n,...

Finally you can use it in your app:

<p>{{ $t("message.hello") }}</p>

I recommend searching more on the topic, there are plenty of resources on it.

๐Ÿ‘คMajed Badawi

Leave a comment