Laravel Vue i18n

2.8.0 verified Sat Apr 25 auth: no javascript

Laravel Vue i18n version 2.8.0 is a Vue 3 plugin that connects Laravel localization files (JSON and PHP) with Vue applications, including Inertia.js support. It mirrors Laravel's translation functions (__(), trans_choice(), Lang.get(), etc.) in Vue components and templates. Release cadence is active: multiple fixes and features released monthly. Key differentiators: native Laravel localization syntax, Vite plugin to auto-convert PHP translations, SSR support, and reactive current locale. Ships TypeScript types.

Common errors

error TypeError: __ is not a function ↓

cause The plugin may not have been installed correctly, or the import path is wrong.

fix

Ensure you call app.use(i18nVue, ...) after creating the Vue app, and import __ from 'laravel-vue-i18n' if using composition API without plugin global.

error Missed translation key: 'some.key' ↓

cause The translation file for the current language might not contain that key, or the file was not loaded.

fix

Check that your JSON translation files include the key. For PHP translations, ensure the Vite plugin is configured and you have run npm run dev to generate the php_*.json files.

error Cannot find module 'laravel-vue-i18n/vite' ↓

cause The Vite plugin is imported from a subpath that may not be resolved correctly if the package is not installed or if the import is malformed.

fix

Run npm install laravel-vue-i18n to ensure it's installed. Import using correct path: import i18n from 'laravel-vue-i18n/vite' (not from the main package).

Warnings

breaking In v2.8.0, the way Vue augmentation was changed — now it augments `vue` instead of `@vue/runtime-core`. If you rely on custom type augmentation, you might need to update your tsconfig or type declarations. ↓

fix Ensure your project uses `vue` types directly. If you encounter type errors, remove any custom augmentations of `@vue/runtime-core` and use `vue` instead.

gotcha The Vite plugin `laravel-vue-i18n/vite` generates `php_*.json` files in your `lang` folder during dev. These can be accidentally committed to version control if not ignored. ↓

fix Add `lang/php_*.json` to your `.gitignore` file.

gotcha If you use PHP translations (array-based) without the Vite plugin, they must be converted to JSON. The plugin does this automatically. Without it, PHP translations will not be available. ↓

fix Use the Vite plugin `i18n()` in your `vite.config.js`, or manually convert your PHP translation files to JSON.

deprecated The `trans` function is deprecated in favor of `tran`. ↓

fix Replace `trans()` with `tran()` or `__()` in your codebase.

gotcha When using SSR, the `resolve` method must not return a Promise. You must provide an eager-loaded object. ↓

fix Use `import.meta.glob('...', { eager: true })` and return `langs[path].default` synchronously.

Install

npm install laravel-vue-i18n

yarn add laravel-vue-i18n

pnpm add laravel-vue-i18n

Imports

i18nVue
wrong
```
import i18nVue from 'laravel-vue-i18n'
```
correct
```
import { i18nVue } from 'laravel-vue-i18n'
```
Named export in ESM. CommonJS users: const { i18nVue } = require('laravel-vue-i18n').
__
wrong
```
const __ = require('laravel-vue-i18n').__
```
correct
```
import { __ } from 'laravel-vue-i18n'
```
Named export. Available globally after plugin install, but can also be imported explicitly for composition API usage.
tran
```
import { tran } from 'laravel-vue-i18n'
```
Named export. Alias for __. Also available as trans (deprecated).
i18nPlugin (Vite)
wrong
```
import i18n from 'laravel-vue-i18n'
```
correct
```
import i18n from 'laravel-vue-i18n/vite'
```
Vite plugin is a separate subpath import, not the default export.

Quickstart

Sets up the plugin with Vite glob import for JSON translations and uses __() helper in component.

// Install: npm install laravel-vue-i18n

// main.js
import { createApp } from 'vue'
import { i18nVue } from 'laravel-vue-i18n'

const app = createApp({
  template: '<h1>{{ __("Welcome") }}</h1>'
})

app.use(i18nVue, {
  lang: 'en',
  resolve: async (lang) => {
    const langs = import.meta.glob('../lang/*.json')
    return await langs[`../lang/${lang}.json`]()
  }
})

app.mount('#app')

// resources/lang/en.json: { "Welcome": "Welcome" }