Package Exports

laravel-vue-i18n
laravel-vue-i18n/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (laravel-vue-i18n) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Laravel Vue i18n

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

Installation

With npm:

$ npm i laravel-vue-i18n

or with yarn:

$ yarn add laravel-vue-i18n

Usage

import { createApp } from 'vue'
import { i18nVue } from 'laravel-vue-i18n'

createApp()
    .use(i18nVue)
    .mount('#app');

<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>

Plugin Options

lang (optional): if not provided it will try to find from the <html lang="pt"> tag, if is not available it will default to en.
resolve (optional): The way to reach your language files.

createApp().use(i18nVue, {
    lang: 'pt',
    resolve: lang => import(`../lang/${lang}.json`),
})

`trans(message: string, replacements: {})`

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!

`transChoice(message: string, count: number, replacements: {})`

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.

`loadLanguageAsync(lang: string)`

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>

`getActiveLanguage()`

The getActiveLanguage() returns the language that is current beign used.

import { getActiveLanguage } from 'laravel-vue-i18n';

const lang = getActiveLanguage(); // en