Currently, I am developing a Vue project within a static environment that lacks Node or Vue-cli support. In order to utilize Vue, Vuetify, and vue-i18n, we are incorporating them through CDNs.
Our goal is to translate the Vuetify components using Vue-i18n, as demonstrated here.
For reference, you can view a Codepen here, showcasing my attempt at translating the pagination section at the bottom.
Despite my efforts to utilize Vue.use(), I encountered difficulties getting it to function properly. There were no errors reported in the console, yet the translations did not reflect on the page.
import App from '../components/App.vue.js';
import i18n from '../lang/languages.js';
import store from './store/store.js';
Vue.filter('toUpperCase', function(value) {
return value.toUpperCase();
});
Vue.config.devtools = true;
Vue.use(Vuetify, {
lang: {
t: (key, ...params) => i18n.t(key, params)
}
});
new Vue({
i18n,
store,
el: '#app',
render: (h) => h(App)
});
The file lang/languages.js contains the following:
import { russian } from './languages/russian.js';
import { chineseSimple } from './languages/chinese-simple.js';
import { german } from './languages/german.js';
import { portuguese} from './languages/portuguese.js';
const languages = {
'ru': russian,
'zh-Hans': chineseSimple,
'de': german,
'pt': portuguese,
};
const i18n = new VueI18n({
locale: 'en',
messages: languages
});
export default i18n;