Can't seem to get trans to work about laravel-vue-i18n HOT 41 CLOSED

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

from laravel-vue-i18n.

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'

from laravel-vue-i18n.

Thanks for the help debugging @A-Ghorab 💪.

from laravel-vue-i18n.

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,
		),
.
.
.

from laravel-vue-i18n.

Yes this makes sense. And it works!

Thanks a lot

from laravel-vue-i18n.

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.

from laravel-vue-i18n.

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.

from laravel-vue-i18n.

Hey @AngelOD

it should work strait out of the box with this:

import { trans } from 'laravel-vue-i18n'

console.log(trans('translate this'));

Let me know if that works.

from laravel-vue-i18n.

So this is my test of it, which outputs Your T-shirt size (if applicable) in the template, but signup.field.shirt_size.name in the console.

<template>
  {{ $t(testKey) }}
</template>

<script>
import { defineComponent, ref } from 'vue';
import { trans } from 'laravel-vue-i18n';

export default defineComponent({
  setup() {
    const testKey = ref('signup.field.shirt_size.name');

    console.log(trans(testKey.value));

    return {
      testKey,
    };
  },
});
</script>

Am I doing something wrong?

from laravel-vue-i18n.

Just tried with <script setup> and works just fine.

Example:

pt.json

{
    "signup.field.shirt_size.name": "TEST"
}

import { trans } from 'laravel-vue-i18n'
import { ref } from 'vue'

const labelKey = ref('signup.field.shirt_size.name');
console.log(trans(labelKey.value)); // Returns 'TEST'

Will try your example.

from laravel-vue-i18n.

yea, I was able to replicate with your example, will figure it out and fixed that bug.

Thank you for sharing it :)

from laravel-vue-i18n.

Aah awesome! Thanks! I was wondering what on earth I could be doing wrong, because while the plugin is massively helpful, it doesn't require a whole lot of configuration to get it to work (a massive plus, obviously), so I couldn't figure out what I could be doing differently. 😁

from laravel-vue-i18n.

Thanks for the works @AngelOD, you can for now try and switch the resolve method to require instead of import, I did not make a try but it should solve the issue.

Let me know if it works.

from laravel-vue-i18n.

I've tried changing it to the following:

.use(i18nVue, {
  resolve: lang => require(`../lang/${lang}.json`),
})

But I'm getting the following error: Uncaught (in promise) TypeError: options.resolve(...).then is not a function

from laravel-vue-i18n.

Thanks @AngelOD will be debugging it during tomorrow. sorry about the delay.

from laravel-vue-i18n.

No worries at all. I'm just really appreciative that you'll look into it at all. 😄

from laravel-vue-i18n.

Hi @xiCO2k ,

Thank you for works.

My English is not good, I'm not sure whether I make myself clear.

ISO 15897: en_GB.json -> <html lang="en-GB">

app.blade.php:

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
...

from laravel-vue-i18n.

Hey @aczyt, just released a new version that should handle that issue by default, let me know if that works for you 💪.

from laravel-vue-i18n.

Thanks @xiCO2k,

config/app.php

'locale' => 'en_GB'

settings now work fine. But I had to change the language file name to en-GB.json. Laravel default: en_GB.json.

and loadLanguageAsync(), All language files containing underscores must be modified.

Laravel Docs - Defining Translation Strings

For languages that differ by territory, you should name the language directories according to the ISO 15897. For example, "en_GB" should be used for British English rather than "en-gb".

Laravel-Lang/lang#1269

Of course, I don't have much language for my project, I can work, it's just not perfect.😉

from laravel-vue-i18n.

I need to ask: Are the two things related? Because it doesn't seem like it is, but I could be wrong. Just wondering why they're in the same bug. 😄

from laravel-vue-i18n.

Hey @AngelOD not related at all, still had not the time to handle your case completely.

Sorry about that.

from laravel-vue-i18n.

Hey @aczyt I also replaced the dash with an underscore on loadLanguageAsync so if you try to load a language called en-GB.json it will look for en_GB.json. Hope that helps.

Thanks

from laravel-vue-i18n.

Thank you! @xiCO2k ,Now it works.

Sorry @AngelOD , at first I thought we had the same problem, so reply here.😄

from laravel-vue-i18n.

Hey @AngelOD can you check if you have the same issue with v1.0.0?

Thanks.

from laravel-vue-i18n.

Hey @xiCO2k. I just did and unfortunately it's still giving me the same issue. However, I think it has to do with the way the languages are loaded, because while this:

console.log(trans('signup.field.shirt_size.name'));

onMounted(() => {
  console.log(trans('signup.field.shirt_size.name'));
});

Gives me the incorrect response, the following will print the correct line:

setTimeout(() => {
  console.log(trans('signup.field.shirt_size.name'));
}, 3000);

from laravel-vue-i18n.

Yes with the defineComponent it runs before it loads the language file.

Can you try with the require instead of the import?

from laravel-vue-i18n.

Absolutely. So I changed the plugin use statement to:

.use(i18nVue, {
  resolve: lang => require(`../lang/${lang}.json`),
})

Which compiles fine with Laravel Mix, but gives me the following error in the browser's console:

Uncaught (in promise) TypeError: options.resolve(...).then is not a function
    loadLanguageAsync http://testsite.test/js/app.js:27901
    install http://testsite.test/js/app.js:28003
    use http://testsite.test/js/app.js:10825
    setup http://testsite.test/js/app.js:27007
    node_modules inertiajs/inertia-vue3/dist/index.js/exports.createInertiaApp/<@http://testsite.test/js/app.js:10
    promise callback*./node_modules/ inertiajs/inertia-vue3/dist/index.js/exports.createInertiaApp@http://testsite.test/js/app.js:10
    js http://testsite.test/js/app.js:26991
    __webpack_require__ http://testsite.test/js/app.js:55154
    <anonymous> http://testsite.test/js/app.js:55319
    O http://testsite.test/js/app.js:55191
    <anonymous> http://testsite.test/js/app.js:55321
    <anonymous> http://testsite.test/js/app.js:55323
app.js:27901:10

from laravel-vue-i18n.

Thanks for debugging it: try this:

resolve: (lang) => new Promise((resolve) => resolve({ default: require(`../lang/${lang}.json`) })),

from laravel-vue-i18n.

That gets rid of the error message, but gives the same result as an import statement.

I wonder if it could be solved somewhat easily with an isLanguageLoaded function (or even onLanguageLoaded lifecycle function), to only execute calls to trans and such after the language has, well, been loaded?

from laravel-vue-i18n.

Yes that could be a good option, I also can try return a vue ref() that will trigger the update when its available.

Thanks again @AngelOD

from laravel-vue-i18n.

That could also be a solution. I've found that over 90% of my translation calls happen in the template part of the component, so yeah, a ref could also work.

from laravel-vue-i18n.

yeah i had the same issue @AngelOD so just wanted to share my solution and for any one visiting this issue until there is a better fix for it :).

also I'm open if you have better ideas as well.

i just depend on a certain key from my own side "about_us" to check if the translation is loaded or not?
if a utility method introduced like is_loaded() ? would replace that line.

let appIsLoaded = false;
export function trans_ref(key: string, replacements: ReplacementsInterface = {}): Ref<string> {
    const getTranslation = () => trans(key, replacements);

    let tranRef = ref(getTranslation());
    if(!appIsLoaded && trans("about_us") === "about_us"){
        const timer = setInterval(() => {
            const result = getTranslation();
            if(appIsLoaded || result != tranRef.value){
                tranRef.value = result;
                appIsLoaded = true;
                clearInterval(timer);
            }
        }, 100);
    }
    return tranRef;
}

from laravel-vue-i18n.

Hey @AngelOD and @AGhorabHekouky just released a new version with the isLoaded method.

from laravel-vue-i18n.

Hey @AngelOD and @AGhorabHekouky just released a new version with the isLoaded method.

do you think i should create a new transRef function that returns ref instead of string as a utility function?

i can work on it later today it might help with closing this Issue entirely what do you think ?

from laravel-vue-i18n.

from laravel-vue-i18n.

@xiCO2k and @A-Ghorab
Awesome! Thank you both of you. 😄

from laravel-vue-i18n.

As a Vue3 user I have a similar issue as OP had, but the none of the proposed solutions works for me.

I'm trying to use the trans or this.$t() function in data() or mounted() but I don't get it to work. It just doesn't load the right language strings, it just outputs the key.

Probably this has to do with the language file not being loaded yet, but this seems such a default use case that I hoped it would just work. Tried to work with wTrans as well but to no avail.

from laravel-vue-i18n.

As a Vue3 user I have a similar issue as OP had, but the none of the proposed solutions works for me.

I'm trying to use the trans or this.$t() function in data() or mounted() but I don't get it to work. It just doesn't load the right language strings, it just outputs the key.

Probably this has to do with the language file not being loaded yet, but this seems such a default use case that I hoped it would just work. Tried to work with wTrans as well but to no avail.

mind sharing the code ?

since the method wTrans is implemented it always shows the correct translation for me.

from laravel-vue-i18n.

@A-Ghorab yes, sure:

Simplified App

import {i18nVue} from 'laravel-vue-i18n'

createInertiaApp({
  title: (title) => title + appName,
  resolve: async name => {
    let page = (await import('./Pages/${name}')).default;
    if (page.layout === undefined) {
      page.layout = Layout
    }
    return page
  },
  setup({el, app, props, plugin}) {
    return createApp({render: () => h(app, props)})
    .use(plugin)
    .use(i18nVue, {
      resolve: lang => import('../lang/${lang}.json'),
    })
    .mount(el);
  },
});

Simplified component

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

export default {
  props: {
    item: Object
  },
  data() {
    return {
      propertiesList: [
        {
          text: `${wTrans('Untranslated')} <span class="font-semibold">${this.item.surface}</span>`,
          list: 1
        },
      ]
    }
  }
}

from laravel-vue-i18n.

For me nothing above works. I am using latest version v2.3.0 of this package and vue 3 composition API (script setup).
EDIT: Options API mounted hook gives me same results.

Here are all solutions I have tested:

.use(i18nVue, {
  // resolve: (lang) => import(`../../lang/${lang}.json`), // Nothing works with this, same as resolve with Promise in comments above
  resolve: (lang) => require(`../../lang/${lang}.json`), // Only nextTick works with this
})

<script setup>
import { isLoaded, trans, wTrans } from "laravel-vue-i18n";
import { computed, onMounted, nextTick } from "vue";

// I get same results inside and outside onMounted()

// returns something.foo
console.log(trans('something.foo'));

// returns something.foo
console.log(wTrans('something.foo').value);

// I need value to get string because it's object ComputedRefImpl
// console.log returns something.foo
let foo = computed(() => trans("something.foo")).value;

// I need double value here to get string
// console.log returns something.foo
let bar = computed(() => wtrans("something.foo").value).value;

// returns true and translated string (but only when using require in resolve above)
// isLoaded() is false for all examples above
nextTick(() => console.log(isLoaded(), trans("error.generic")));
</script>

from laravel-vue-i18n.

You can check the onLoad event, that you can pass as an option to the plugin, to get the callback after the lang is loaded, probably the only way to tackle that case.

Thanks for reporting

from laravel-vue-i18n.