add lang to an existing Vuejs application

Question

started studying VueJs. Wondering how to add the internationalization. Consulted this VueJs documentation page:

Getting started
To set the available locales or the current locale, supply the lang option when installing Vuetify.

Ask myself if everybody who starts learning VueJs think about internationalization...

My question it is there a way to add the lang option AFTER the vuejs application is created.

Majed Badawi Majed Badawi · Accepted Answer · 2020-04-15T17:07:59

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.

add lang to an existing Vuejs application

1 Answers