Locale seems to be stuck to "en"

ludoguenet commented 1 year ago

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 1 year ago

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

xiCO2k commented 1 year ago

Yes that would be awesome @ludoguenet 💪

trippo commented 1 year ago

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 1 year ago

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 1 year ago

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 1 year ago

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 1 year ago

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

martinbkaiser commented 1 year ago

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 11 months ago

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 10 months ago

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

xiCO2k commented 10 months ago

Hey @ludoguenet is this still an issue?

AhmedK97 commented 10 months ago

i'm Facing the same issue

valpuia604 commented 9 months ago

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

ludoguenet commented 9 months ago

@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 9 months ago

Thanks @ludoguenet

xiCO2k commented 9 months ago

and @valpuia604

xiCO2k / laravel-vue-i18n

Locale seems to be stuck to "en" #128