I'm using Vue 3 with composition API and while $t and $tChoice both function perfectly, I can't seem to get trans or transChoice to function properly. It's as if it's using a different configuration from $t and $tChoice. Thus no language strings are loaded.

It may just be a case of me doing something very wrong, as I work with Vue 2 daily and this is my first Vue 3 Composition API project.

require('./bootstrap');

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { i18nVue } from 'laravel-vue-i18n';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18nVue, {
              resolve: lang => import (`../lang/${lang}.json`),
            })
            .mixin({ methods: { route } })
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

Hi @xiCO2k , Thanks you for this helpful librairie.

But i face some issues. I install the librairie with Laravel and Vue3, in combinaision with LaravelMix. When i launch npm run watch, i'm pop with a ton of Laravel Mix alert of successful compilation. I don't know why. Thanks

• laravel-vue-i18n - 2.1.1
• vite - 2.9.9
• vuejs 3.2.25
• node 16.16.0
• without laravel

// .env

VITE_LARAVEL_VUE_I18N_HAS_PHP=false

// src/main.ts

import { createApp } from 'vue'
import { i18nVue } from 'laravel-vue-i18n'
import i18nOptions from '@/utils/lang'

import pinia from '@/utils/pinia'

createApp(App)
    .use(i18nVue, i18nOptions(pinia))

// src/utils/lang

import { Pinia } from 'pinia'
import { useSettingsStore } from '@/stores/settings'

export default (pinia: Pinia) => {
    const lang = useSettingsStore(pinia).locale

    const resolve = async (lang: string) => {
        const files = import.meta.glob('../../lang/*.json')

        return await files[`../../lang/${ lang }.json`]()
    }

    return { lang, resolve }
}

Result: not working

If we add output to the console, we see that the files are loaded:

const resolve = async (lang: string) => {
    const files = import.meta.glob('../../lang/*.json')

    console.log(files)
    console.log(
        import.meta.env.VITE_API_URL,
        import.meta.env.VITE_LARAVEL_VUE_I18N_HAS_PHP
    )

    return await files[`../../lang/${ lang }.json`]()
}

Without the VITE_LARAVEL_VUE_I18N_HAS_PHP key, I also get the error:

Version 1.4.4 worked perfectly.

Hi,

We recently updated our project to use vite instead of webpack and also modified also our vuejs files to make it compatible, everything is working well except for one thing. Yesterday I noticed that the requested translations did not load on the first load of the project when you refresh or visit the website.

For example when I put the url in my webbrowser and visit it, the translations will be in English but if I click on 1 menu item to go to another page, everything will change to the Dutch translations (which is correct).

Our app.js is as follows:

import './bootstrap';
import '../css/app.css';

// Import modules...
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { InertiaProgress } from '@inertiajs/progress'
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
import { faEdit } from "@fortawesome/free-solid-svg-icons";
import { faEye } from "@fortawesome/free-solid-svg-icons";
import { faSun } from "@fortawesome/free-solid-svg-icons";
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { i18nVue } from 'laravel-vue-i18n';

library.add(faInfoCircle);
library.add(faEdit);
library.add(faEye);
library.add(faSun);

  createInertiaApp({
      resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
      setup({ el, app, props, plugin }) {
          return createApp({ render: () => h(app, props) })
              .use(plugin)
              .use(i18nVue, {
                  resolve: async lang => {
                      const langs = import.meta.glob('../../lang/*.json');
                      return await langs[`../../lang/${lang}.json`]();
                  }
              })
              .mixin({ methods: { route, hasAnyPermission: function (permissions) {
                      var allPermissions = this.$page.props.auth.can;
                      var hasPermission = false;

                      permissions.forEach(function(item){
                          if(allPermissions[item]) hasPermission = true;
                      });
                      return hasPermission;
                  } } })
              .mixin({ methods: { route } })
              .component("font-awesome-icon", FontAwesomeIcon)
              .mount(el);
      },
  });

and in our vuejs files we use {{ $t('translation') }} to load the translations for a specific text, what can be the reason that the translation only load when you navigate to another page?

Hi,

I've tried installing this package and followed the documentation for Vite, but I'm getting the following error in the console.

Uncaught (in promise) TypeError: langs[(("../../lang/" + (intermediate value)) + ".json")] is not a function

I am getting this on a fresh installation of Laravel Jetstream and the installation of this package

laravel new example --jet 

npm i laravel-vue-i18n

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.js",
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        i18n(),
    ],
});

app.json

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

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
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 =
    window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob("./Pages/**/*.vue")
        ),
    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)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

InertiaProgress.init({ color: "#4B5563" });

Am I stupid and am I forgetting something or is something not working properly ?

Hi, I'm getting the following error when on Firefox. No issues on Chrome

Uncaught (in promise) TypeError: langs[(("../../lang/" + (intermediate value)) + ".json")] is not a function

Also: after upgrade from 0.2.1 to 0.4.1:

Uncaught SyntaxError: The requested module '/node_modules/.vite/laravel-vue-i18n.js?v=4bc78461' does not provide an export named 'i18nVue'

This happened with v3 also, rolling back to 0.2.1 it works again.

Originally posted by @ibrunotome in https://github.com/xiCO2k/laravel-vue-i18n/issues/3#issuecomment-1008974849

I can't get translation to work using latest two releases of this package (v1.4.4 or v2.0.0), but v1.4.3 does seems work with the setup below.

When using v1.4.4 and v2.0.0, the $t() function does not translate the given string and the isLoaded function always returns false, but if I replace either of those versions with v1.4.3, then the isLaoded function returns true and translation works.

There are no errors raised and I can see the generated translation files gets fetched when loading my application in the browser.

webpack.mix.js

const mix = require('laravel-mix');
require('laravel-vue-i18n/mix');

mix.js('resources/js/app.js', 'public/js').vue()
    .i18n()
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps()
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

app.js

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { i18nVue } from 'laravel-vue-i18n';
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import 'dayjs/locale/en-gb'

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {

        dayjs.extend(relativeTime);
        dayjs.extend(localizedFormat);
        dayjs.locale('en-gb');

        const VueApp = createApp({ render: () => h(app, props) });

        VueApp.config.globalProperties.$_ = _;

        VueApp.config.globalProperties.$dayjs = dayjs;

        VueApp.config.globalProperties.$filters = {
            truncate(text, length, clamp){
                clamp = clamp || '...';
                var node = document.createElement('div');
                node.innerHTML = text;
                var content = node.textContent;
                return content.length > length ? content.slice(0, length) + clamp : content;
            }
        }

        VueApp.use(plugin)
            .use(i18nVue, {
                resolve: lang => import(`../../lang/${lang}.json`),
            })
            .mixin({ methods: { route } })
            .mount(el);

        return VueApp;
    },
});

InertiaProgress.init({ color: '#4B5563' });

Hello,

Why I get the following error?

GET http://***.com/js/resources_lang_hu_json.js net::ERR_ABORTED 404 (Not Found)
Uncaught (in promise) TypeError: Cannot load lang: hu file: Loading chunk resources_lang_hu_json failed.

The resources/lang/en.json file exists.

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!

Hello, first of all sorry for my English, I use google translate.

When I use "npm run dev", the translation process is done quickly without any problems, but when I do "npm run build", the file "php_tr.32683819.js" loads quite late depending on the internet speed. This causes "keys" to appear in the first opening of the page.

As seen in the picture, "php_tr.32683819.js" file is loaded 2000ms after the page is opened.

Dependencies "laravel-vue-i18n": "^2.2.2", "vite": "^3.0.0", "vue": "^3.2.31"

Laravel 9+

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

app.js

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        const captcheKey = props.initialPage.props.recaptcha_site_key;
        const application = createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18nVue, {
                resolve: async lang => {
                    const langs = import.meta.glob('../../lang/*.json');
                    return await langs[`../../lang/${lang}.json`]();
                }
            })
    ...

Hello @xiCO2k, Great package! It works really well, I have been using it for my upcoming project and it's been a breeze. Though I am running into a weird issue that I'm not sure how to solve. Translations don't seem to be working inside a layout (including nested components within). Everything inside the <slot /> seems to work perfectly. I have a feeling it's something to do with how I am using layouts with Inertia.

<!-- other relevant imports -->
import { i18nVue } from "laravel-vue-i18n";

createInertiaApp({
    resolve: (name) => {
        const page = resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue"));

        page.then((module) => {
            module.default.layout = module.default.layout || BaseLayout;
        });

        return page;
    },

    title: (title) => (title ? `${title} - App Name` : "App Name"),

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

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

The same translations that work elsewhere don't work here.

My App.vue just contains the usual boilerplate code (nav, global search, etc) so I won't paste it here.

<!-- lots of boilerplate code -->
<slot />

What's weird is that for pages that use the default layout (Base.vue), the translations work just fine.

I did some more digging... Could it be related to the workaround?

<script>
    import AppLayout from "@/Shared/Layouts/App.vue";

    export default {
        layout: AppLayout,
    };
</script>
<script setup>
...

https://github.com/inertiajs/inertia/discussions/651

Maybe you could give some light on this.

I have a string with for example,

Do you really want to block :name. After this :name won't be able to message you.

First occurrence of :name is translated, second is not.

I used it in the following sentence:

'Weet je zeker dat je :name wilt deblokkeren? :name kan dan weer berichten sturen.'

Results in the following:

Weet je zeker dat je adsasd wilt deblokkeren? :name kan dan weer berichten sturen.

Thanks for the great plugin!

The FallbackLocale option is not working correctly.

// config/app.php
'locale' => 'de',

 'fallback_locale' => 'en',

// resources/lang/en/app.php
return [

    'jetstream' => [

        'Forgot Password' => 'Forgot Password',
        'Two-factor Confirmation' => 'Two-factor Confirmation',
        'Email Verification' => 'Email Verification',

    ],

];

// resources/lang/de/app.php
<?php

return [

    'jetstream' => [

        // 'Forgot Password' => 'Passwort vergessen',
        'Two-factor Confirmation' => 'Zwei-Faktor-Authentifizierung',
        'Email Verification' => 'E-Mail-Verifizierung',

    ],

];

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

I would expect the trans function to use the fallbackLocale. Instead it echoes out the translation string.

// 'Forgot Password' is set in de/app.php, locale = 'de', fallbackLocale = 'en'
console.log(trans('app.jetstream.Forgot Password')); // -> Passwort vergessen

// 'Forgot Password' is not set in de/app.php, locale = 'de', fallbackLocale = 'en'
console.log(trans('app.jetstream.Forgot Password')); // -> app.jetstream.Forgot Password

Hi Francisco,

I can't get the package to work with PHP files.

I followed these steps (no SSR): https://github.com/xiCO2k/laravel-vue-i18n#with-webpack--laravel-mix

The console says this: Unhandled Promise Rejection: Error: Cannot find module './en.json'.

The file /public/js/lang_php_en_json.js exists.

Also is resolving as instructed in app.js correct? The file ../../lang/${lang}.json does not exist. In ../../lang/en/ are my PHP translation files. No json file.

Any idea what to do?

Hi, my project uses the Laravel Modules package (https://github.com/nWidart/laravel-modules) which allows you to separates logic in different modules. This means that every module has its own lang files.

The problem is that it is not possible to specify more than one folder for PHP files in the Vite plugin.

export default function i18n(langPath: string = 'lang')

It would be perfect if it accepts an array of LangPaths in order to process more than one folder.

Is this a possible change?