Can't seem to get the translations working

[timoransky]

Hi!

I can't get this package to work on my project for some reason. I mean, it works, but it doesn't really load translations from my .json file.

This is what my /resources/js/admin/index.js looks like. Notice the console log in resolve function which doesn't output anything to the console.

import { i18nVue } from "craftable-pro/plugins/laravel-vue-i18n";

...

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: async (name) => {
        ...
    },
    // @ts-ignore
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18nVue, {
                resolve: async (lang) => {
                    const langs = import.meta.glob("../../../*.json");

                    // This doesn't provide any output to console
                    console.log("foo");

                    return await langs[`../../../${lang}.json`]();
                },
            })
            ...
            .mount(el);
    },
});

And this is how my /lang/en.json looks like:

{
    "prefix.Media": "Media translated",
}

However, when I try to get the translation for key prefix.Media I get the key back, like there is no translated string present.

<script setup lang="ts">
...
const lang = getActiveLanguage();
const loaded = isLoaded();

console.log(lang, loaded, trans("prefix.Media"));
</script>

I'm using InertiaJS with Vite, this is my config:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
const path = require("path");

export default defineConfig({
    plugins: [
        laravel({
            input: [
                "resources/css/app.css",
                "resources/js/app.js",
                "resources/js/admin/index.ts",
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./resources/js"),
            ziggy: path.resolve(__dirname, "./vendor/tightenco/ziggy"),
        },
    },
});

Do you by any chance know where might be the problem? Or did I missunderstand something in the docs?

Thanks in advance!

[xiCO2k]

can you check if inside the <template> it works? Thanks.

[timoransky]

@xiCO2k sadly no, not even in the template as you can see here:

<template>
    <div class="p-20">
        {{ $t("prefix.Media") }}
    </div>
</template>

[xiCO2k]

Got it, thanks. Will find the issue and add a fix for that.

Thanks

[timoransky]

Great, if you will need any help or more info from my side just hit me up anytime 😊

[timoransky]

@xiCO2k just tried installing v1.4.4 and it works in the template:

[xiCO2k]

Hey @timoransky just checked, and seems to be working, and I also created a test to make sure that works: https://github.com/xiCO2k/laravel-vue-i18n/commit/85367852f8db4e7e585a8e042d1958a6db82ab65

Also your example:

setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18nVue, {
                resolve: async (lang) => {
                    const langs = import.meta.glob("../../../*.json");

                    // This doesn't provide any output to console
                    console.log("foo");

                    return await langs[`../../../${lang}.json`]();
                },
            })
            ...
            .mount(el);
    },

It looks like you are not looking on a lang folder.