Code Monkey home page Code Monkey logo

Comments (18)

xiCO2k avatar xiCO2k commented on May 28, 2024

Hey @iMaBo, everything looks good to me, can you check a couple things to help me debug it:

  • What is the "lang" attribute on your HTML tag.
  • What version you have installed from the package.json file.
  • If happens with only vite command or it still happens when you run the vite build.

Thanks.

from laravel-vue-i18n.

iMaBo avatar iMaBo commented on May 28, 2024

Hey @xiCO2k

  • What is the "lang" attribute on your HTML tag.
    In the app.blade.php file it is <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> this will result in <html lang="nl"> if visited in the browser.

  • What version you have installed from the package.json file.
    "laravel-vue-i18n": "^2.1.3",

  • If happens with only vite command or it still happens when you run the vite build.
    It happends with both commands, with vite and vite build both will give the same result.

from laravel-vue-i18n.

xiCO2k avatar xiCO2k commented on May 28, 2024

Thanks, I think I found the issue, can you try again with v2.2.1 version.

Let me know if that is working well.

Thanks,
Francisco

from laravel-vue-i18n.

iMaBo avatar iMaBo commented on May 28, 2024

Just updated the package to version v2.2.1 and deployed it, and it seems to be fixed now.
The translations do get loaded on the initial launch of the app.

Much appreciated for the quick fix 😄

from laravel-vue-i18n.

xiCO2k avatar xiCO2k commented on May 28, 2024

No problem, anytime.

from laravel-vue-i18n.

diego-lipinski-de-castro avatar diego-lipinski-de-castro commented on May 28, 2024

iam having the same problem, on v2.2.2, vue v3.2.31, cant find why

from laravel-vue-i18n.

xiCO2k avatar xiCO2k commented on May 28, 2024

Can you try v2.3.0. and check if there is any issue on the console?

Thanks.

from laravel-vue-i18n.

diego-lipinski-de-castro avatar diego-lipinski-de-castro commented on May 28, 2024

Still didnt seem to work, I can workaround this by adding :key to the root component, and then, in the onMounted lifecycle, i can inside a 50ms timeout update the key to force the entire app to re-render and then it will update the ui with the correct language, but its a hack, the ui always flashes the content because of this.

You can check the code

https://github.com/diego-lipinski-de-castro/linkarme

from laravel-vue-i18n.

xiCO2k avatar xiCO2k commented on May 28, 2024

Awesome, will take a look on that.

from laravel-vue-i18n.

xiCO2k avatar xiCO2k commented on May 28, 2024

Hey @diego-lipinski-de-castro just checked and looks like to avoid that (since the language is being read async) you may need to change your resolve method to the SSR example like this:

resolve: lang => {
    const langs = import.meta.globEager('../../lang/*.json');
    return langs[`../../lang/${lang}.json`].default;
}

from laravel-vue-i18n.

diego-lipinski-de-castro avatar diego-lipinski-de-castro commented on May 28, 2024

Still doesnt seem to work unfortunately, is there an working example I could test of this working? or maybe another way of testing

from laravel-vue-i18n.

xiCO2k avatar xiCO2k commented on May 28, 2024

made that switch on your repo, then I did run vite build and that was it.

from laravel-vue-i18n.

Mondotosz avatar Mondotosz commented on May 28, 2024

edit: I found out why it didn't work while writing this and testing on the side and thought it might be interesting for others. and still uploaded it alongside what I found at the end.

made that switch on your repo, then I did run vite build and that was it.

I tried it on my project and it still doesn't work on the first page load.
I'm sorry I can't share the full repository as it is a project I'm working on as an intern but here are some insights which might be useful.

I'm working with the jetstream/inertia preset and the specific use case where I'm having this issue is when I'm loading graphs with chartjs.

here's the abstract class I made to get the translations

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

export abstract class Lang {
    public static keys: Readonly<object>
    public static fallbacks: Readonly<object>

    public static getLang(keyName: string | number) {
        return this.keys[keyName] ?? null
    }

    public static getFallback(keyName: string | number) {
        return this.fallbacks[keyName] ?? null
    }

    public static get translations() {
        // if (isLoaded()) {
            return Object.assign({},
                ...Object.entries(this.keys)
                    .map(([index, value]) =>
                        ({ [index]: trans(value) }))
            )
        // }

        // return this.fallbacks
    }

    public static translate(keyName: string | number): string | null {
        const key: string | undefined = this.keys[keyName]

        if (key === undefined) {
            return null
        }

        if (isLoaded()) {
            return trans(key)
        }

        return this.fallbacks[keyName] ?? keyName
    }
}

The LogLevel class which extends this

import { Lang } from "../Base/Lang";

export class LogLevelLang extends Lang {
    public static keys = Object.freeze({
        1: 'activity.emergency',
        2: 'activity.alert',
        3: 'activity.critical',
        4: 'activity.error',
        5: 'activity.warning',
        6: 'activity.notice',
        7: 'activity.info',
        8: 'activity.debug',
    })
    public static fallbacks = Object.freeze({
        1: 'Emergency',
        2: 'Alert',
        3: 'Critical',
        4: 'Error',
        5: 'Warning',
        6: 'Notice',
        7: 'Info',
        8: 'Debug',
    })
}

and what I'm doing inside the setup

<script  setup>
//...
const activitiesMeta = Meta.new()
    .doughnut()
    .setLabels(LogLevelLang.translations)
    .setColors(LogLevelColor.colors)
    .title({
        display: true,
        text: 'Activity levels'
    })
    .setTooltipPercentage()
    
const activitiesStats = computed(() => datasetGenerator(props.stats.activities, activitiesMeta))
//...
</script>

<template>
    ...
    <Doughnut :chart-data="activitiesStats" :chart-options="activitiesMeta.options" />
    ...
</template>

I tested some things while writing this and found out why my code didn't work as intended.
When using the trans function this way

const tmp = trans('my.translation.key')

the translation would occure before the translation got loaded and I was able to fix this by using

const tmp = computed(()=>trans('my.translation.key'))

In my specific case I had to turn activitiesMeta into a computed property and pass it to the activities computed property using .value

As I'm still quite new to vue I'm not quite sure of the impact on performances from using it this way but at least it works.

I think the documentation should warn about such details when using the function from within the setup

(In my case, switching the resolve method to the SSR example didn't cause any issues but it wasn't required to make it work)

from laravel-vue-i18n.

diego-lipinski-de-castro avatar diego-lipinski-de-castro commented on May 28, 2024

made that switch on your repo, then I did run vite build and that was it.

U might got confused, because if any state changes, the app rerenders and then renders the translations, but if you F5 you will see that the translations arent being loaded, that might be the case, im not sure, I made that change and ran vite build but got the same results, after logging in and F5

from laravel-vue-i18n.

kskrlinnorth2 avatar kskrlinnorth2 commented on May 28, 2024

Same issue, translations aren't available in mounted hooks or outside of hooks on first load (refresh/f5), but we are using webpack, not vite.
Using version: 2.3.0.

Translations work only in rendered html (template).

app.js

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

some component where we need translations in mounted hook

onMounted(() => {
  console.log("error.generic"); // Output is error.generic
});

en.json
{ "error.generic": "This is generic error!" }

from laravel-vue-i18n.

pristavu avatar pristavu commented on May 28, 2024

https://github.com/pristavu/inertia-vue3-i18n

Throttle the network via devtools

from laravel-vue-i18n.

pushparajbhatta avatar pushparajbhatta commented on May 28, 2024

I am experiencing the same issue while using it with Inertia JS. I have found out that the "lang" attribute on <html> tag is not updating after the language changer route redirects user back to the page. And after refresh the "lang" attribute on <html> tag is also updated, translation also works. When the user clicks to change the language, after changing the locale on the session, I redirect back to the same page. Even if I redirect to any other pages, it gives the same issue.

from laravel-vue-i18n.

pushparajbhatta avatar pushparajbhatta commented on May 28, 2024

Finally, figured it out. In my case, the issue is caused by the <Link> component of "inertiajs/inertia-vue3"

As per Inertia JS docs:
Link component is a light wrapper around a standard anchor <a> link that intercepts click events and prevents full page reloads from occurring.

Hence, the page is not reloading the <html> tag and the "lang" attribute remains unchanged. However, it works on F5/refresh because it reloads the full page and the <html> tag gets refreshed as well.

The solution for me is to use normal anchor tag or any other language switching alternatives instead of the Link component.
Make sure the <html> tag's "lang" attribute is updated when you change the language and it should then work on inital page loads too

@iMaBo @diego-lipinski-de-castro @Mondotosz @kskrlinnorth2 @pristavu Please try this out and see if it works.

from laravel-vue-i18n.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.