laravel-vue-i18n: Can't seem to get trans to work

I’m using Vue 3 with composition API and while $t and $tChoice both function perfectly, I can’t seem to get trans or transChoice to function properly. It’s as if it’s using a different configuration from $t and $tChoice. Thus no language strings are loaded.

It may just be a case of me doing something very wrong, as I work with Vue 2 daily and this is my first Vue 3 Composition API project.

Just in case it's important, here's the app.js file that I use

require('./bootstrap');

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { i18nVue } from 'laravel-vue-i18n';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18nVue, {
              resolve: lang => import (`../lang/${lang}.json`),
            })
            .mixin({ methods: { route } })
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 41 (22 by maintainers)

Most upvoted comments

The tl;dr that worked for me after going through this thread is to change your trans function calls to wTrans:

import { wTrans } from 'laravel-vue-i18n';

getPassword() {
	return {
		required: helpers.withMessage(
			wTrans('Password is required.'),
			required,
		),
.
.
.

alkrauss48 on Mar 21, 2022

Thanks for the help debugging @A-Ghorab 💪.

xiCO2k on Feb 22, 2022

ok it won’t work that way

try this way

text: computed(() => `${wTrans('Untranslated').value} <span class="font-semibold">${this.item.surface}</span>`),

this should do a ref instead of a simple string to watch for any changes and update it automatically which would fix the issue related to loading the files later on or changing the current language .

don’t forget

import { computed } from 'vue'

A-Ghorab on Feb 22, 2022

@AngelOD you can use wTrans() now instead of trans() it should work correctly for you no more need for trans_ref() fix.

A-Ghorab on Jan 31, 2022

This problem appears to be more complicated than it seems. Sometimes trans works, while wTrans does not. And sometimes wTrans works but trans does not. In some cases the wTrans I have to extend the value i.e. wTrans('Hello!').value for it to work, while sometimes wTrans('Hello!') is enough. It’s very strange all this and I’ve been dealing with this problem for hours. Ideally, trans should work just like $t() works. So this issue should not be closed.

care to share your code

basically you need to use wTrans if you are outside the template and you need to be sure to wrap it with computed to handle complex scenario

i’m using it with vuelidate and providing the translations to the validation and it’s working 100% of the times.

A-Ghorab on Apr 13, 2022

This problem appears to be more complicated than it seems. Sometimes trans works, while wTrans does not. And sometimes wTrans works but trans does not. In some cases the wTrans I have to extend the value i.e. wTrans('Hello!').value for it to work, while sometimes wTrans('Hello!') is enough. It’s very strange all this and I’ve been dealing with this problem for hours. Ideally, trans should work just like $t() works. So this issue should not be closed.

mreduar on Apr 13, 2022

Yes this makes sense. And it works!

Thanks a lot

fgd007 on Feb 22, 2022