Translate meta tags in vue-router with i18n

Question

I can't figure out how to use i18n inside vue.router to translate the meta tags that are being used for my breadcrumb

main.js

import vuexI18n from 'vuex-i18n';
Vue.use(vuexI18n.plugin, store);
const i18n = Vue.i18n
import es_es from '@/assets/langs/es_es';
import en_us from '@/assets/langs/en_us';
i18n.add('es_es', es_es)
i18n.add('en_us', en_us)
i18n.set('en_us')

router.js

import vuexI18n from 'vuex-i18n'
Vue.use(Router)
Vue.use(vuexI18n.plugin, store)
const i18n = Vue.i18n

Key for the route trying to translate

{
    path: '/clientes/nuevo',
    name: 'CustomersNew',
    beforeEnter: (to, from, next) => { 
         Auth(to, from, next); 
         CheckPermission(to, from, next, "customers@add_customer");
    },
    component: CustomersNew,
    meta: {
        breadcrumb: {
            title: Vue.i18n.translate('customers.title'),
            links: [ "Customers", "new"]
        }
    }
}

Any translation used in any template are translated just fine.

Answer 1

Instead of trying to translate directly on the router, you may pass the key as string and do the translation directly in the bread-crumb component

{
path: '/clientes/nuevo',
name: 'CustomersNew',
beforeEnter: (to, from, next) => { 
     Auth(to, from, next); 
     CheckPermission(to, from, next, "customers@add_customer");
},
component: CustomersNew,
meta: {
    breadcrumb: {
        title: "key.to.translate.as.string',
        links: [ "Customers", "new"]
    }
}

}

And in the component, translate as always.

Answer 2

for me I use this solution.

src/router/index.js

import i18n from '@/i18n';

const DEFAULT_TITLE = 'DEFAULT_TITLE';
router.afterEach((to, from) => {
    Vue.nextTick(() => {
        document.title = i18n.t(to.meta.title || DEFAULT_TITLE);
    });
});

you can use i18n.t('Text to translate') inside meta directly .

this my code inside src/i18n/index.js.

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.prototype.isRtl = localStorage.getItem('lang') === 'ar';

Vue.use(VueI18n);

function loadLocaleMessages() {
    const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
    const messages = {};
    locales.keys().forEach(key => {
        const matched = key.match(/([A-Za-z0-9-_]+)\./i);
        if (matched && matched.length > 1) {
            const locale = matched[1];
            messages[locale] = locales(key);
        }
    });
    return messages;
}

export default new VueI18n({
    locale: localStorage.getItem('lang') || 'ar',
    fallbackLocale: localStorage.getItem('lang') || 'ar',
    messages: loadLocaleMessages(),
});