Inertia + vue3 starter kit Localization support.

Hi,

I am in learning process and I started a new project to practice a bit. My first goal is having language support to my App using vue starter kit.

The backend part is acomplished and the frontend almost acomplished there is a refresh issue. When I refresh the page I see the original labels and then the translated ones. This is weird for me. But first I want to review what I did in case I did somenthing wrong. Once I create standard project with Larave 13 + inertia + vue3 + authorization enabled:

1. populate language files

php artisan lang:publish

2. create en.json in lang folder with my labels.
3. translate al language files to my supported languages (somthing I'll do at the end. For the moment. Just create a few keys tot test it.)
4. Add new field in users to store desired languge (in fact it is a json field named preferences with multiple options.)
5. Create a new middleware SetLocal to get current language in Laravel

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\App;

class SetLocale
{
    public function handle(Request $request, Closure $next)
    {
        $available = array_keys(config('app.available_locales'));
        
        // Precendece
        // 1. session locale
        // 2. user
        // 3. Browser preferences
        // 4. config.
        $locale = $request->session()->get('locale')
            ?? optional($request->user())?->lang
            ?? $request->getPreferredLanguage($available)
            ?? config('app.locale', 'en');
                    
        if (in_array($locale, $available, true)) {
            App::setLocale($locale);
        } else {
            //Misconfiguration issue => en
            App::setLocale('en');
        }
        return $next($request);
    }
}

6. Register middleware in bootstrap app.php

<?php

use App\Http\Middleware\HandleAppearance;
use App\Http\Middleware\HandleInertiaRequests;
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets;
use App\Http\Middleware\SetLocale;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware): void {
        $middleware->encryptCookies(except: ['appearance', 'sidebar_state']);

        $middleware->web(append: [
            HandleAppearance::class,
            SetLocale::class, /* THIS */
            HandleInertiaRequests::class,
            AddLinkHeadersForPreloadedAssets::class,
        ]);
    })
    ->withExceptions(function (Exceptions $exceptions): void {
        //
    })->create();

7. add in shere method in HandleInertiaRequests two data to be shered with frontend. current language and available language (for future language selector not covered here.).

public function share(Request $request): array
{
    return [
        ...parent::share($request),
        'auth' => [
            'user' => $request->user(),
        ],
        'locale' => fn () => app()->getLocale(),
        'available_locales' => fn () => config('app.available_locales'),
    ];
}

8. Install laravel-vue-i18n
9. Add in vite.config.js

//at the beginning of the file.
import i18n from 'laravel-vue-i18n/vite';

//in plugins section
i18n(),

10. In app ts

//at the beginning of file
import { createApp, h } from 'vue';
import { i18nVue } from 'laravel-vue-i18n';

//Inside the createInertiaApp

setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(i18nVue, {
                lang: (props.initialPage.props.locale as string) ?? 'en',
                fallbackLang: 'en',
                resolve: async (lang: string) => {
                    const langs = import.meta.glob('../../lang/*.json');
                    return await langs[`../../lang/${lang}.json`]();
                },
            });
             // Only mount in the browser. On SSR `el` is undefined and mounting
        // would try to access `window`.
        if (typeof window !== 'undefined' && el) {
            app.mount(el);
        }

        return app;
    },

11. Now we can use this to translate

in php

__('hello world!');

In vue3

{{ $t('hello world') }}

And now my question:

It works fine. But when I refresh the page I see the original label "hello world" and then the translated text "Hola món". Is there something wrong? Maybe my vue part is not quite fine and I forget something or I doing something too late?

thank you