Video
Description
laravel-vue-i18n is a Vue3 plugin that allows to connect your Laravel Framework translation files with Vue. It uses the same logic used on Laravel Localization.
With Vite
import { createApp } from 'vue'import { i18nVue } from 'laravel-vue-i18n' createApp() .use(i18nVue, { resolve: async lang => { const langs = import.meta.glob('../../lang/*.json'); return await langs[`../../lang/${lang}.json`](); } }) .mount('#app');
PHP Translations Available on Vue
In order to load php translations, you can use this Vite plugin.
// vite.config.jsimport i18n from 'laravel-vue-i18n/vite'; export default defineConfig({ plugins: [ laravel([ 'resources/css/app.css' 'resources/js/app.js', ]), vue(), // Laravel >= 9 i18n(), ],});
Usage
<template> <div> <h1>{{ $t('Welcome, :name!', { name: 'Francisco' }) }}. </h1> <div>Logged in {{ $tChoice('{1} :count minute ago|[2,*] :count minutes ago', 10) }}</div> </div></template>
Related Content on Laravel Daily
Video
Recent Courses on Laravel Daily
Laravel 13 Starter Kit Teams and Customizations
10 lessons
33 min
Roles and Permissions in Laravel 13
14 lessons
57 min
How to Structure Laravel 13 Projects
16 lessons
1 h 32 min read