Skip to content

Mixed translations #211

@ionesculiviucristian

Description

@ionesculiviucristian

Hi. I'm having an weird issue using this config:

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

import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { i18nVue } from 'laravel-vue-i18n';
import type { DefineComponent } from 'vue';
import { createApp, h } from 'vue';
import { ZiggyVue } from 'ziggy-js';
import { initializeTheme } from './composables/useAppearance';

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

createInertiaApp({
  title: (title) => (title ? `${title} - ${appName}` : appName),
  resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob<DefineComponent>('./pages/**/*.vue')),
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(ZiggyVue)
      .use(i18nVue, {
        resolve: async (lang: string) => {
          const langs = import.meta.glob('../../lang/*.json');
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          return await langs[`../../lang/${lang}.json`]();
        },
        onLoad: () => {
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          if (el && el.__vue_app__) return;
          app.mount(el);
        },
      });
  },
  progress: {
    color: '#4B5563',
  },
});

// This will set light / dark mode on page load...
initializeTheme();

Using Laravel/Vue/Inertia.js in docker.

The strings are in romanian initially (still don't know how that setting is read by default, but it works); the thing is that when I navigate to other routes or I do a refresh, the string start to get mixed romanian / english. Have no console or server errors.

Previously had a "fix" when if (el && el.__vue_app__) return; was not present but that lead to vue app being mounted multiple times and some pages were rendering blank.

And yes, the strings are translated because thy are displayed at some points correctly.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions