Vue I18n is an internationalization plugin of Vue.js. It easily integrates some localization features to your Vue.js Application.
The simple usage with in html would be as below,
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<div id="app">
<p>{{ $t("user.message") }}</p>
</div>and after that configure them in javascript
// Ready translated locale messages
const messages = {
en: {
user: {
message: 'Good morning'
}
},
de: {
user: {
message: 'Guten Morgen'
}
}
}
// Create VueI18n instance with options
const i18n = new VueI18n({
locale: 'de', // set locale
messages, // set locale messages
})
// Create a Vue instance with `i18n` option
new Vue({ i18n }).$mount('#app')The output is going to be like this,
