I building a app for Desktop using electron.js
+ vue.js
and plugins vue-electron
, electron-window-manager
.
Now I need put vue-i18n and it's structure work non default way...
ex. mainwindow
are like toolbar or main menu. Others menus(windows) are opened by the main menu and with this combination of technologies the vue-i18n
do not work fine.
this is a repo: anderzilla/vue-electron!
I have tryed solutions like vue-i18n tutorial kazupon! but the error message is:
[Vue warn]: Error in render: "TypeError: Cannot read property '_t' of undefined"
found in
---> <MenuConfig> at src/renderer/components/MenuConfig.vue
<Clarity> at src/renderer/App.vue
<Root>
and my i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const messages = {
'pt' : {
alterarsenha: 'Alterar Senha',
grupos: 'Grupos',
pausas: 'Pausas',
disponivel: 'Disponibilidade',
sair: 'Sair',
},
'en' : {
alterarsenha: 'Change Password',
grupos: 'Groups',
pausas: 'Pauses',
disponivel: 'Disponibility',
sair: 'Logout',
},
'es' : {}
};
const i18n = new VueI18n({
locale: 'pt', // set locale
fallbackLocale: 'en', // set fallback locale
messages, // set locale messages
});
In main.js code it's like tuto's kazupon
In template (other window created by electron-window-manager)
<template>
<main id="menu-config">
<v-row>
<div class="col-md-4" id="menu-config">
<div class="menu-config">
<ul @mouseleave="close">
<li>
<button @click="alterarSenha" class="titulo" >{{ $t('alterarsenha') }} - Alterar Senha</button>
</li>
the "$t" is the problem...
I only need this for i18n aplication.
I fix it! The problem is the order that components be declareded.
new Vue({
components: { App },
i18n,
router,
store,
template: "<App/>"
}).$mount("#app");
i18n must be before router!