Can not retrive nested translation keys

[digiageltd]

Hello guys,

I am experiencing an issue with accessing nested translation keys in the plugin. This is my en.json file with some example translations:

en.json:

{
"general": {
        "main_menu": {
            "trending": "Trending!",
            "blog": "Blog",
            "game": "Game",
            "ads": "Advertise",
            "about": "About us",
            "contacts": "Contacts"
        }
    }
}

When I am calling the translation string I want with "{{ $t('general') }}" I'm getting this object which is ok:

{
  "main_menu": {
    "trending": "Trending!",
    "blog": "Blog",
    "game": "Game",
    "ads": "Advertise",
    "about": "About us",
    "contacts": "Contacts"
  }
}

but when I call for example "about": {{ $t('general.main_menu.about') }} all I have is a string "general.main_menu.about" not the expected "About".

I will provide here the vite.config.js and app.js. I'm stuck witht this problem for a day so far. Maybe I'm missing something small and I just can't see it. Thanks in advance!

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/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                base: null,
                includeAbsolute: false
            }
        }),
        i18n,
    ],
});

app.js:

import {createApp, h} from 'vue'
import {createInertiaApp} from '@inertiajs/vue3'
import MainLayout from "@/Layouts/MainLayout.vue";
import { i18nVue } from 'laravel-vue-i18n'

createInertiaApp({
    resolve: async (name) => { 
        const pages = import.meta.glob('./Pages/**/*.vue')

        const page = await pages[`./Pages/${name}.vue`]()
        page.default.layout = page.default.layout || MainLayout

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

I'm using the following versions:

laravel-vue-i18n: "2.4.3" laravel: "10.10"

[xiaofengorz]

I have the same trouble too.👀

[xiCO2k]

I believe you need to call the i18n function, instead of just passing the function on your vite.config.js