search

xiCO2k / laravel-vue-i18n

Allows to connect your `Laravel` Framework translation files with `Vue`.
MIT License
598 stars 49 forks source link

Translation not working when using v1.4.4 or v2.0.0 #40

Closed ipimpat closed 2 years ago

ipimpat commented 2 years ago

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' });
xiCO2k commented 2 years ago

Hey @ipimpat can you provide me the lang folder names to see if I can find any issue on that?

Thanks.

ipimpat commented 2 years ago

I'm using Laravel 9.

This is my lang folder in the app root directory.

├── en
│   ├── auth.php
│   ├── pagination.php
│   ├── passwords.php
│   └── validation.php
└── en.json
xiCO2k commented 2 years ago

Thanks for the follow-up, and if you can check what you have on the <html lang=""> tag, would be great.

xiCO2k commented 2 years ago

Hey @ipimpat any follow up?

ipimpat commented 2 years ago

The lang attribute is set to en

xiCO2k commented 2 years ago

Hey @ipimpat can you try the latest tag?

ipimpat commented 2 years ago

Seems to work now, thanks a lot!