13

How to work with laravel, inertia js, and vue-i18n

 3 years ago
source link: https://dev.to/paulocastellano/how-to-work-with-laravel-inertia-js-and-vue-i18n-26ih
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Cover image for How to work with laravel, inertia js, and vue-i18n

How to work with laravel, inertia js, and vue-i18n

The last week i lost some hours trying to make inertia js and vue-i18n works together in changelogfy. But some people from inertiajs discord community help to understand and make it works, very thanks 🙏

To help some people to understand the process, I decided to create this post blog.

I will centralize all my languages files at laravel default translates, in the folder resources/lang.

I think is a great way to deliver i18n to the front and backend with the same translated files.

But vuejs requires JSON language files, not PHP.

To convert all our PHP translate files to JSON, we will install the composer package bellow:

composer require librenms/laravel-vue-i18n-generator

Enter fullscreen mode

Exit fullscreen mode

Publish the package configs:

php artisan vendor:publish --provider="MartinLindhe\VueInternationalizationGenerator\GeneratorProvider"

Enter fullscreen mode

Exit fullscreen mode

Now let's run this command to convert files:

php artisan vue-i18n:generate

Enter fullscreen mode

Exit fullscreen mode

A file will be created by default in resources/js/vue-i18n-locales.generated.js

This file contains all your languages.

Important:
You need run the command above every time you added new translations or every deployment of your application!

Now let's install the vue-i18n package.

npm install vue-i18n@next

Enter fullscreen mode

Exit fullscreen mode

If you like to give power to user changes automatically your language, you can send locale to view by HandleInertiaRequests middleware.

<?php

namespace App\Http\Middleware;

use Illuminate\Support\Facades\Session;
use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    protected $rootView = 'app';

    public function version(Request $request)
    {
        return parent::version($request);
    }

    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'user' => function () use ($request) {
                if (!$request->user()) {
                    return;
                }
            },
            'locale' => app()->getLocale()
        ]);
    }
}

Enter fullscreen mode

Exit fullscreen mode

Now let's set up the resources/js/app.js, to use vue-18n and use the current user language send by HandleInertiaRequests middleware.

import { createI18n } from "vue-i18n";
import localeMessages from "./vue-i18n-locales.generated";

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";

createInertiaApp({
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        const i18n = createI18n({
            locale: props.initialPage.props.locale, // user locale by props
            fallbackLocale: "en", // set fallback locale
            messages: localeMessages, // set locale messages
        });

        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18n)
            .mixin({
                methods: {
                    route
                },
            })
            .mount(el);
    },
});

Enter fullscreen mode

Exit fullscreen mode

Now you can use vue-18n in any view like this:

I hope I helped you ✌️


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK