Vue integration: Unable to translate inside the script tag

[Temepest74]

I am using Vue with vite + typescript + sail if it is relevant vite.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import i18n from "laravel-vue-i18n/vite";

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.ts",
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        i18n(),
    ],
    server: {
        hmr: {
            host: "localhost",
        },
    },
});

app.ts

import "./bootstrap";
import "../css/app.css";

import { createApp, h, type DefineComponent } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";
import { i18nVue } from "laravel-vue-i18n";

const appName = import.meta.env.VITE_APP_NAME || "Laravel";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob<DefineComponent>("./Pages/**/*.vue")
        ),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(i18nVue, {
                resolve: async (lang: any) => {
                    const langs = import.meta.glob("../../lang/*.json");
                    return await langs[`../../lang/${lang}.json`]();
                },
            })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progress: {
        color: "#4B5563",
    },
});

Ok, my problem is with this setup

<script setup lang="ts">
console.log(trans('tab.dashboard')) //it print the key, not the translation
</script>
<template>
<p>{{trans('tab.dashboard'}}</p> //this does the right thing, printing the translation
</template>

[Temepest74]

And something weird, sometimes both works. But most of the time it is bugged

[xiCO2k]

You should not use the trans directly inside the script since it can load before the i18n loads the translation file.

The solution for that is to use that in a computed prop.

Also inside the template try to use the $t() instead, to have the reactivity

[Temepest74]

You should not use the trans directly inside the script since it can load before the i18n loads the translation file.

The solution for that is to use that in a computed prop.

Also inside the template try to use the $t() instead, to have the reactivity

Oh it makes sense, mb, I am new to vue. Thank you

[xiCO2k]

No worries! anything let me know.