My vue component like this :
-
I use vue-i18n for that. That way you should make its own dictionary.
I made a i18n/en.js
file;
module.exports = {
login: {
title: 'Login',
loginButton: 'Login',
emailInput: 'email',
passwordInput: 'password',
},
Form: {
title: 'Form',
}
}
and a i18n/hu.js
with the same variables in Hungarian. Then I made a i18n/map.js
file:
var en = require('./en.js');
var hu = require('./hu.js');
module.exports = {
en,
hu,
}
and finally, set it in vue.js
, check my app.js
file part:
require('./bootstrap'); // vue comes from here
import VueI18n from 'vue-i18n'
import dictionary from './i18n/map'
var localeTmp = document.documentElement.lang;
var locale = "hu";
if(localeTmp) {
locale = localeTmp
}
const i18n = new VueI18n({
locale: locale, // set locale
dictionary, // set map of dictionary
})
....
const app = new Vue({
el: 'app',
i18n,
});
Its a very elegant way.
and how I use in component? simple:
....
person
....