xiCO2k/laravel-vue-i18n

laravel-vue-i18n is a Vue3 plugin that allows to connect your Laravel Framework translation files with Vue. It uses the same logic used on Laravel Localization.

With Vite

import { createApp } from 'vue'
import { i18nVue } from 'laravel-vue-i18n'
 
createApp()
    .use(i18nVue, {
        resolve: async lang => {
            const langs = import.meta.glob('../../lang/*.json');
            return await langs[`../../lang/${lang}.json`]();
        }
    })
    .mount('#app');

PHP Translations Available on Vue

In order to load php translations, you can use this Vite plugin.

// vite.config.js
import i18n from 'laravel-vue-i18n/vite';
 
export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css'
            'resources/js/app.js',
        ]),
        vue(),
 
        // Laravel >= 9
        i18n(),
    ],
});

Usage

<template>
    <div>
        <h1>{{ $t('Welcome, :name!', { name: 'Francisco' }) }}. </h1>
        <div>Logged in {{ $tChoice('{1} :count minute ago|[2,*] :count minutes ago', 10) }}</div>
    </div>
</template>