laravel-vue-i18n
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.
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}.phpresources/lang/{locale}/{namespaces}.phplang/{locale}.jsonresources/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.
<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.
| Kinds | Template | Imports |
|---|---|---|
vue-template-text | {{ $t('{key}'{args}) }} | |
vue-attribute | :{attr}="$t('{key}'{args})" | |
js-string, js-template | trans('{key}'{args}) | import { trans } from 'laravel-vue-i18n' |