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 npm:
npm i laravel-vue-i18nor with yarn:
yarn add laravel-vue-i18nIf you want to see a screencast on how to setup check out this video: How to use Laravel Vue i18n plugin.
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');For Server Side Rendering the resolve method should not receive a Promise and instead take advantage of the globEager method like this:
.use(i18nVue, {
lang: 'pt',
resolve: lang => {
const langs = import.meta.globEager('../../lang/*.json');
return langs[`../../lang/${lang}.json`].default;
},
})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(),
// Laravel < 9, since the lang folder is inside the resources folder
// you will need to pass as parameter:
// i18('resources/lang'),
],
});During the
npm run devexecution time, the plugin will create some files like thisphp_{lang}.jsonon your lang folder. And to avoid that to be commited to your code base, I suggest to your.gitignorethis like:
lang/php_*.jsonimport { createApp } from 'vue'
import { i18nVue } from 'laravel-vue-i18n'
createApp()
.use(i18nVue, {
resolve: lang => import(`../../lang/${lang}.json`),
})
.mount('#app');For Server Side Rendering the resolve method should receive a require instead of a Promise:
.use(i18nVue, {
lang: 'pt',
resolve: lang => require(`../../lang/${lang}.json`),
})In order to load php translations, you can use this Mix plugin.
const mix = require('laravel-mix');
require('laravel-vue-i18n/mix');
// Laravel >= 9
mix.i18n();
// Laravel < 9, since the lang folder is inside the resources folder
// you will need to pass as parameter:
// mix.i18n('resources/lang');<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>lang(optional): If not provided it will try to find from the<html lang="pt">tag.fallbackLang*(optional): If thelangwas not provided or is invalid, it will try reach for thisfallbackLanginstead, default is:en.resolve(required): The way to reach your language files.
createApp().use(i18nVue, {
lang: 'pt',
resolve: lang => import(`../../lang/${lang}.json`),
})The trans() method can translate a given message.
// lang/pt.json
{
"Welcome!": "Bem-vindo!",
"Welcome, :name!": "Bem-vindo, :name!",
}
import { trans } from 'laravel-vue-i18n';
trans('Welcome!'); // Bem-vindo!
trans('Welcome, :name!', { name: 'Francisco' }) // Bem-vindo Francisco!
trans('Welcome, :NAME!', { name: 'Francisco' }) // Bem-vindo FRANCISCO!The wTrans() same as trans() but returns a reactive obj with translated value,
use it instead of trans() to watch any changes (language changes or lang files loaded) and set the new value.
// lang/pt.json
{
"Welcome!": "Bem-vindo!",
"Welcome, :name!": "Bem-vindo, :name!",
}
import { wTrans } from 'laravel-vue-i18n';
setup() {
return {
welcomeLabel: wTrans('Welcome!'),
welcomeFrancisco: wTrans('Welcome, :name!', { name: 'Francisco' })
}
}
<template>
<div>{{ welcomeLabel }}</div> // <div>Bem-vindo!</div>
<div>{{ welcomeFrancisco }}</div> // <div>Bem-vindo, Francisco!</div>
</template>The transChoice() method can translate a given message based on a count,
there is also available an trans_choice alias, and a mixin called $tChoice().
// lang/pt.json
{
"There is one apple|There are many apples": "Existe uma maça|Existe muitas maças",
"{0} There are none|[1,19] There are some|[20,*] There are many": "Não tem|Tem algumas|Tem muitas",
"{1} :count minute ago|[2,*] :count minutes ago": "{1} há :count minuto|[2,*] há :count minutos",
}
import { transChoice } from 'laravel-vue-i18n';
transChoice('There is one apple|There are many apples', 1); // Existe uma maça
transChoice('{0} There are none|[1,19] There are some|[20,*] There are many', 19); // Tem algumas
transChoice('{1} :count minute ago|[2,*] :count minutes ago', 10); // Há 10 minutos.The wTransChoice() same as transChoice() but returns a reactive obj with translated value,
use it instead of transChoice() to watch any changes (language changes or lang files loaded) and set the new value.
// lang/pt.json
{
"There is one apple|There are many apples": "Existe uma maça|Existe muitas maças",
"{0} There are none|[1,19] There are some|[20,*] There are many": "Não tem|Tem algumas|Tem muitas",
"{1} :count minute ago|[2,*] :count minutes ago": "{1} há :count minuto|[2,*] há :count minutos",
}
import { wTransChoice } from 'laravel-vue-i18n';
setup() {
return {
oneAppleLabel: wTransChoice('There is one apple|There are many apples', 1),
multipleApplesLabel: wTransChoice('{0} There are none|[1,19] There are some|[20,*] There are many', 19)
}
}
<template>
<div>{{ oneAppleLabel }}</div> // <div>Existe uma maça</div>
<div>{{ multipleApplesLabel }}</div> // <div>Tem algumas</div>
</template>The loadLanguageAsync() can be used to change the location during the runtime.
import { loadLanguageAsync } from 'laravel-vue-i18n';
<template>
<div>{{ $t('Welcome!') }}</div>
<button @click="loadLanguageAsync('pt')">Change to Portuguese Language</button>
</template>The getActiveLanguage() returns the language that is currently being used.
import { getActiveLanguage } from 'laravel-vue-i18n';
const lang = getActiveLanguage(); // enThe isLoaded() method checks if the language is loaded.
If the lang parameter is not passed it will check for the actual language set.
import { isLoaded } from 'laravel-vue-i18n';
const loaded = isLoaded(); // true
const loaded = isLoaded('fr'); // false