So , i guess you are familiar with vuejs , or if not then in simple words vuejs is …
Simple
Write some HTML, grab some JSON, create a Vue instance, that’s it.
Reactive
Expressions & computed properties with transparent dependency tracking.
Components
Compose your application with decoupled, reusable components.
Compact
~23kb min+gzip, no dependency.
Fast
Precise and efficient async batch DOM updates.
Package Ready
Install via NPM or Bower – leverage your favorite eco system!
Find more at vuejs.org
So , here we are talking about laravel-vue-i18n-generator ,it Generates a vue-i18n compatible include file from your Laravel translations. in simple words this package that allows you to share your Laravel localizations with your vue front-end, using vue-i18n.
ok lets , install this via composer
In your project: composer require martinlindhe/laravel-vue-i18n-generator
In config/app.php
providers:
MartinLindhe\VueInternationalizationGenerator\GeneratorProvider::class,
Then generate the include file with php artisan vue-i18n:generate
Here is the basic usage of this package
djust your vue app with something like:
import Vue from 'vue';
import VueInternationalization from 'vue-i18n';
import Locales from './vue-i18n-locales.generated.js';
Vue.use(VueInternationalization, {
lang: 'en',
locales: Locales
});
...
Parameters
The generator adjusts the strings in order to work with vue-i18n’s named formatting, so you can reuse your Laravel translations with parameters.
resource/lang/message.php:
return [
'hello' => 'Hello :name',
];
in vue-i18n-locales.generated.js:
...
"hello": "Hello {name}",
...
Blade template:
<div class="message">
<p>{{ trans('message.hello', ['name' => 'visitor']) }}</p>
</div>
Vue template:
<div class="message">
<p>{{ $t('message.hello', {name: 'visitor'}) }}</p>
</div>
The generated file is an ES6 module & Pluralization don’t work with vue-i18n
Comments