Need assistance to install the package using InertiaJs

[macmotp]

Hello, thanks for the great package, is exactly what I need for my project.

I follow all the installation process but still I am not able to render the translations in the frontend (application using Laravel 9, Vite and InertiaJs - all latest versions). This is my setup:

app.js

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

...

createInertiaApp({
    ...
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(i18nVue, {
                lang: 'en',
                fallbackLang: 'en',
                resolve: async lang => {
                    const languages = import.meta.glob('../../lang/*.json');
                    return await languages[`../../lang/${lang}.json`]();
                }
            })
            .mount(el)
    },
})

vite.config.js

import i18n from 'laravel-vue-i18n/vite';

...

export default defineConfig({
    plugins: [
       ...
        i18n(),
    ],

The build goes fine, I am also able to generate the json file from php, but if I am trying to render {{ $t('auth.failed' )}} in a vue component, it shows me the key. I tried to debug using your helpers isLoaded, getActiveLanguage and this is what I get:

const lang = getActiveLanguage();
const loaded = isLoaded();
console.log(lang, loaded, trans('auth.failed'));

// Output: 
// 'en', false, 'auth.failed'
// 'en', true, 'auth.failed'
// I guess it's double logging because of async resolve.

Any help to understand what am I doing wrong? You mentioned that you are using it with InertiaJs so I guess I am missing something here.

Thanks

[xiCO2k]

Hey @macmotp you can take a look on this demo app I created, it has Jetstream with inertia.

Hope it helps, let me know if there is any question: https://github.com/xiCO2k/laravel-vue-i18n-vite-app

[macmotp]

Thanks @xiCO2k for the reply. I checked my code and I dont see any difference (Im not using Jetstream, that's the only one but I dont think is relevant cmiiaw).

So let me show you my console log, maybe it's more clear for you:

This is where I am logging in app.js

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

And see the image for the result:

(for reference, the file lang/php_en.json exists)

[macmotp]

Ok so I reinstalled node and yarn from scratch and now magically it works. Javascript magic 😄! Thank you for your support!

[briavers]

Hey @macmotp you can take a look on this demo app I created, it has Jetstream with inertia.

Hope it helps, let me know if there is any question: https://github.com/xiCO2k/laravel-vue-i18n-vite-app

Hey, i've tried to setup your example repo but get this error