laravel-vue-i18n

The preset for laravel-vue-i18n. It reads trans and $t calls in Vue and JS against the Laravel translation files.

The laravel-vue-i18n preset supports laravel-vue-i18n, which loads the Laravel translation files in Vue.

Detection

The preset applies when the project depends on laravel-vue-i18n. In a Laravel app, the laravel preset applies too, so the PHP and Vue sides share the same keys.

x18n.config.ts
import { defineConfig } from '@x18n/core'

export default defineConfig({
  presets: ['laravel-vue-i18n', 'laravel'],
})

Locale files

If your config has no resources, the preset uses the same patterns as the laravel preset:

  • lang/{locale}/{namespaces}.php
  • resources/lang/{locale}/{namespaces}.php
  • lang/{locale}.json
  • resources/lang/{locale}.json

A key from a PHP file starts with the path of the file: lang/en/auth.php gives auth.failed. In a JSON file, each key is a whole sentence: Welcome back!.

Supported syntax

These names count as translate calls: trans, wTrans, transChoice, wTransChoice, trans_choice, $t and $tChoice. As in Laravel, a slash in the key becomes a dot.

resources/js/Pages/Login.vue
<script setup lang="ts">
import { trans, wTrans } from 'laravel-vue-i18n'

const error = trans('auth.failed')
const title = wTrans('admin/users.title')
</script>

<template>
  <h1>{{ $t('Welcome, :name!', { name: 'Ada' }) }}</h1>
  <p>{{ $tChoice('One apple|Many apples', count) }}</p>
</template>

These usages are auth.failed, admin.users.title, Welcome, :name! and One apple|Many apples.

The Vite plugin of laravel-vue-i18n writes lang/php_{locale}.json files from the PHP files while vite dev runs. The preset adds php_{locale} to ignoreLocales for each locale with PHP files, so these copies are not read as locales.

Placeholders

Colon: :name, as in 'Welcome, :name!'.

Extraction

Extraction writes to lang/{locale}.json. As in Laravel JSON files, the key is the source text (keygen: 'source'): <h1>Welcome back</h1> becomes {{ $t('Welcome back') }}. Set extract.keygen to change this.

KindsTemplateImports
vue-template-text{{ $t('{key}'{args}) }}
vue-attribute:{attr}="$t('{key}'{args})"
js-string, js-templatetrans('{key}'{args})import { trans } from 'laravel-vue-i18n'