$t , trans and wTrans function always showing key

[mserralta]

Hi there!

I have checked all open and closed issues and I think my issue is very related to #107 but its solution does not work for me.

I'm using L10, Vue3, Vite4.

I'm creating js app like this (I changed path to jsons since it's living in resources/js/admin/cart)

createApp(App)
    .use(i18nVue, {
        resolve: async (lang) => {
            const langs = import.meta.glob("../../../../lang/*.json");
            return await langs[`../../../../${lang}.json`]();
        },
    })
    .mount("#app");

And my vite.config if like this. I'm not using SSR.

export default defineConfig({
    plugins: [
        laravel({
            input: [
                "resources/js/admin/cart/index.js",
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        i18n()
    ],
});

But when I do some test in App.vue I always got key as result:

<template>
  <div class="row">
    {{ $t("sensecues.entities.session.plural") }}
    {{ $t("auth.failed") }}

    {{ lang }}
    {{ message }}
    {{ messageW }}
  </div>
</template>

<script>
import { getActiveLanguage, trans, wTrans } from "laravel-vue-i18n";

export default {
  setup() {
    const lang = getActiveLanguage();
    const message = trans("Forbidden");
    const messageW = wTrans("Forbidden").value;

    return {
      lang,
      message,
      messageW,
    };
  },
};
</script>

OUTPUT:

The dev process and build process generates correctly the new json files and they are well translated like shown:

but it seems they are not loaded as translations messages at some point. I wasn't able to track anymore.

If you need more info, please let me know.

Thanks!

[mserralta]

I tried a different approach adding Inertia to my project (however I don't really need it) and now I get some better result.

Is InertiaJS a need to use this package? I see your Youtube video installing Inertia but I don't see and reference to it to written documentation and it confuses me.

Thanks

[mserralta]

Finally I got it working.

I needed to write resolver like this:

createApp(App)
    .use(i18nVue, {
        resolve: (lang) => import(`../../../../lang/${lang}.json`),
    })
    .mount("#app");

Actually it's like your documentation for Webpack but not for Vite. Your code in docs is not working, for me, with Vite.

I think would be helpful to future users to review this point.

Thanks for your work on this package! Looks great!