Package Exports

laravel-vue-i18n

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, {
        resolve: lang => import(`../lang/${lang}.json`)
    })
    .mount(document.getElementById('app'));

<template>
    <div>{{ $t('Hi all') }}</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: The way to reach your language files.

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

`trans()`

The trans() method can be used on

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

`loadLanguageAsync()`

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>