xiCO2k/laravel-vue-i18n

Locale seems to be stuck to "en"

ludoguenet opened this issue · 16 comments

ludoguenet commented

Hello there! I recently have encountered issues with this beautiful package where the locale seems to be stuck to "en".

Bug Description:
The problem I encountered is that when using the $t('welcome.title') helper in vue 3 @vitejs/plugin with Laravel 10, it always returns the English value, regardless of the locale set. However, when using the normal blade helper __('welcome.title'), it correctly adapts to the locale.

Steps to Reproduce:
Install vue 3 @vitejs/plugin and Laravel 10.
Use the $t('welcome.title') helper in your Vue component.
Verify that the translation value returned is always in English, regardless of the set locale.
Compare with the behavior of the __('welcome.title') helper in blade, which correctly adapts to the locale.

Expected Behavior:
The $t('welcome.title') helper should return the translation value that corresponds to the set locale, similar to the behavior of the __('welcome.title') helper in blade.

Kindest regards :)

ludoguenet commented

Would you like me to create a public repository on L10 that reproduces the mentioned bug?

xiCO2k commented

Yes that would be awesome @ludoguenet 💪

trippo commented

I have the same problem... The locale of the user app is 'it' and the app layout load correctly to
<html lang="it">
But after load it changed to default en
<html lang="en">

without pass to resolve function:

.use(i18nVue, {
                resolve: async lang => {
                    console.log(lang);
                    const langs = import.meta.glob('../../lang/*.json');
                    return await langs[`../../lang/${lang}.json`]();
                }
            })
trippo commented

After a debug session, I discover that this bug derivate from the use of trans function in the props default property like this:

const props = defineProps({
    space: Object,
    documents: Array,
    permissions: {
        type: Object,
        default: {}
    },
    title: {
        type: String,
        default: trans('Documents')
    },...

This use made the changes

muxab commented

I have the same problem... The locale of the user app is 'it' and the app layout load correctly to <html lang="it"> But after load it changed to default en <html lang="en">

without pass to resolve function:

.use(i18nVue, {
                resolve: async lang => {
                    console.log(lang);
                    const langs = import.meta.glob('../../lang/*.json');
                    return await langs[`../../lang/${lang}.json`]();
                }
            })

i faced the same issue , my solution was implementing trippo method
so i made the following
in the <html lang="en">
place <html lang="{{App::getLocale()}}">
this plugin gets the locale from the parent html not fro the Laravel configuration

martinbkaiser commented

After a debug session, I discover that this bug derivate from the use of trans function in the props default property like this:

const props = defineProps({
    space: Object,
    documents: Array,
    permissions: {
        type: Object,
        default: {}
    },
    title: {
        type: String,
        default: trans('Documents')
    },...

This use made the changes

This was our problem, we had a component doing trans this way and it caused the app to switch back to en

xiCO2k commented

Actually a great debug, will need to take a look deeper on how to handle that defineProps

martinbkaiser commented

Actually a great debug, will need to take a look deeper on how to handle that defineProps

Thanks, for more context, this is what our code looked like:


type BookmarkOption = { id: number | string; label: string; saved: boolean }

const bookmarks = ref<Array<BookmarkOption>>([])
const myCollections = ref<BookmarkOption>({
    id: 'my-collections',
    //label: trans('My Collections'),
    label: 'My Collections',
    saved: false,
})
const watchLater = ref<BookmarkOption>({
    id: 'watch-later',
    // label: trans('Watch Later'),
    label: 'Watch Later',
    saved: false,
})

I commented out the trans() for now to get the app working. And another note that might help, this is in a .ts file and not a .vue, not sure if that makes a difference.

cstriuli commented

I have the same issue but even without using the trans helper on properties. the HTML lang value switches automatically after a few seconds.
It just happens using this the SSR example code:

  .use(i18nVue, {
      locale: 'es',
      resolve: async (lang) => {
          const langs = import.meta.glob('../../lang/*.json', { eager: true })
          return langs[`../../lang/${lang}.json`].default
      },
  })
xiCO2k commented

@cstriuli there is no locale option, you should use lang.

  • 👍2
xiCO2k commented

Hey @ludoguenet is this still an issue?

AhmedK97 commented

i'm Facing the same issue

valpuia604 commented

I resolve this by changing from <html lang="en"> to <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

  • ❤️1
ludoguenet commented

@xiCO2k

@valpuia604 found a workaround; indeed, the language indicated in the HTML tag will always be used preferentially over the language specified in the app file.

xiCO2k commented

Thanks @ludoguenet

  • 🚀1
xiCO2k commented

and @valpuia604

  • 👍1