The I18n class encapsulates translation logic and the active language. You can create multiple instances of I18n to support different active languages within the same application (e.g., a main UI in English and a specific component in Portuguese).

While each instance maintains its own active language, loaded language files are shared across all instances to prevent redundant network requests or memory usage.

import { I18n } from 'laravel-vue-i18n'

const resolver = lang => import(`./fixtures/lang/${lang}.json`)

const i18nEn = new I18n({
    lang: 'en',
    resolve: resolver
})
const i18nPt = new I18n({
    lang: 'pt',
    resolve: resolver
})

i18nEn.trans('Welcome!') // outputs "Welcome!"
i18nPt.trans('Welcome!') // outputs "Bem-vindo!"

To make your Laravel PHP translation files available in Vue, use the laravel-vue-i18n/vite plugin in your vite.config.js.

• For Laravel >= 9, call i18n() without arguments.
• For Laravel < 9, pass the path to your lang folder (e.g., i18n('resources/lang')).

You can also provide additionalLangPaths to load translations from other directories. If a key exists in multiple paths, the last path provided takes priority.

// vite.config.js
import i18n from 'laravel-vue-i18n/vite';

export default defineConfig({
    plugins: [
        // ... other plugins
        i18n(), // Laravel >= 9
        // i18n('resources/lang'), // Laravel < 9

        // With additional paths
        i18n({
            additionalLangPaths: [
                'public/locales'
            ]
        }),
    ],
});

Install the plugin using npm or yarn to connect your Laravel translation files with Vue 3.

npm i laravel-vue-i18n

or

yarn add laravel-vue-i18n

To use the plugin with Webpack or Laravel Mix, register the plugin and provide a resolve function in your Vue app setup.

Standard Setup

Use import() for asynchronous loading.

SSR (Server Side Rendering)

For SSR, the resolve function should use require instead of returning a Promise.

// Standard Webpack Setup
import { createApp } from 'vue'
import { i18nVue } from 'laravel-vue-i18n'

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

// SSR Setup
createApp()
    .use(i18nVue, {
        lang: 'pt',
        resolve: lang => require(`../../lang/${lang}.json`),
    })
    .mount('#app');

When calling .use(i18nVue, options), you can provide the following configuration:

The library uses a singleton pattern via I18n.getSharedInstance().

• Shared Mode: When the plugin is installed with shared: true (default), all calls to the exported functions (trans, wTrans, etc.) interact with the same global instance.
• Manual Instances: You can create independent instances using new I18n(options) if you need multiple isolated i18n contexts.
• Resetting: Calling reset() clears all loaded languages and resets the shared instance.

If you are using Laravel Mix, you can extend it with the i18n method to enable build-time processing of translation files. This allows the package to synchronize your Laravel translation files with your Vue application.

To use it, call .i18n() on your Mix configuration and provide the path to your language files using .i18n('path/to/lang').

const mix = require('laravel-mix');

mix.i18n('lang')
   .js('resources/js/app.js', 'public/js');

To integrate laravel-vue-i18n into your Vue application, use the i18nVue plugin. By default, it uses a shared instance across your app. When installed, it provides $t and $tChoice global properties for use in templates.

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

const app = createApp(App)

// Install the plugin
app.use(i18nVue, {
  shared: true // default
})

app.mount('#app')

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

const app = createApp(App)
app.use(i18nVue)
app.mount('#app')

The wTransChoice() method is the reactive version of transChoice(). Use it when you need the pluralized string to update automatically when the count or language changes.

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

// Inside 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)
}