README

Generates a vue-i18n compatible bundle from your Laravel translations, for use with a Vue front end. Optional vuex-i18n output is supported via config.

This package is a maintained fork of https://github.com/martinlindhe/laravel-vue-i18n-generator.

Requirements

PHP 8.2 or higher (use a version that matches your Laravel release)
Laravel 12 or 13

Install

composer require saniolab/laravel-vue-i18n-generator --dev

The service provider is registered automatically via composer.json extra.laravel.providers.

Publish the config when you need to customize paths or the target i18n library:

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

Adjust jsPath, jsFile, and other options in config/vue-i18n-generator.php as needed.

Using vue-i18n

Install the Vue library, then generate the locale file:

npm i vue-i18n

php artisan vue-i18n:generate

The default es6 output is a module with a default export (a locale → messages map). Example with Vue 3 and vue-i18n 9+:

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import messages from './vue-i18n-locales.generated';

const i18n = createI18n({
    legacy: false,
    locale: document.documentElement.lang.slice(0, 2),
    messages,
});

createApp(App).use(i18n).mount('#app');

Using vuex-i18n

npm i vuex-i18n vuex

In config/vue-i18n-generator.php, set 'i18nLib' => 'vuex-i18n', then run php artisan vue-i18n:generate.

import Vue from 'vue';
import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import Locales from './vue-i18n-locales.generated.js';

const store = new Vuex.Store();

Vue.use(vuexI18n.plugin, store);

Vue.i18n.add('en', Locales.en);
Vue.i18n.add('de', Locales.de);
Vue.i18n.set(startLocale);

Output formats

Use --format with es6 (default), umd, or json:

php artisan vue-i18n:generate --format umd

With umd, the bundle exposes window.vuei18nLocales for use without a bundler.

Multiple files (lazy loading)

php artisan vue-i18n:generate --multi
php artisan vue-i18n:generate --multi-locales

Parameters (named placeholders)

Laravel :name placeholders are converted to vue-i18n {name} style.

lang/en/message.php:

return [
    'hello' => 'Hello :name',
];

Vue:

<p>{{ $t('message.hello', { name: 'visitor' }) }}</p>

Notices

Default output is an ES6 module (export default …).
Advanced Laravel pluralization as in the docs is not fully mirrored in vue-i18n / vuex-i18n in all cases.

License

MIT

saniolab / laravel-vue-i18n-generator

Maintainers

Package info

Statistics

Security