Laravel Daily
Home Topics

Handling Multilingual Data in Laravel 10 and Vue.js 3: Best Practices and Techniques

Updated: Feb 18, 2025

Handling Multilingual Data in Laravel 10 and Vue.js 3: Best Practices and Techniques

Handling multilingual data in Laravel 10 and Vue.js 3 involves several best practices and techniques to ensure a seamless user experience. In this answer, we will discuss the steps to set up a multilingual application using Laravel 10 and Vue.js 3, as well as some best practices and techniques for handling multilingual data.

  1. Setting up the Laravel project:

To get started, create a new Laravel project using Composer:

composer create --prefer-dist laravel/laravel myproject

Next, install the Laravel localization package by running the following command:

composer require laravel/laravel-localization
  1. Configuring Laravel for multilingual support:

After installing the localization package, configure the config/app.php file to load the AppServiceProvider and LocaleServiceProvider:

'providers' => [
    // ...
    App\Providers\AppServiceProvider::class,
    // ...
    Laravel\LaravelLocalization\LaravelLocalizationServiceProvider::class,
],

Next, add the following lines to the config/app.php file to configure the localization package:

'locale' => 'en',

'supported_locales' => ['en', 'es'],
  1. Creating language files:

Create a new directory called resources/lang and create subdirectories for each language. For example, create an es directory for Spanish:

mkdir resources/lang
mkdir resources/lang/es

Next, create a new file called messages.php inside the es directory:

<?php

return [
    'welcome' => 'Bienvenido a :name',
];

Create a similar file for the English language:

<?php

return [
    'welcome' => 'Welcome to :name',
];
  1. Creating language routes:

Create a new route file called web.php inside the routes directory and add the following code:

Route::get('/{locale}', function ($locale) {
    Session::put('locale', $locale);
    return redirect()->intended();
})->where('locale', '[a-zA-Z]{2}');
  1. Creating language views:

Create a new Blade template file called welcome.blade.php inside the resources/views directory and add the following code:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="alert alert-info">
                {{ __('welcome') }}
            </div>
        </div>
    </div>
</div>
@endsection

Next, create a new controller called HomeController.php inside the app/Http/Controllers directory and add the following code:

namespace App\Http\Controllers;

use Illuminate\View\View;

class HomeController extends Controller
{
    public function index(): View
    {
        return view('welcome');
    }
}

Finally, update the routes/web.php file to map the / URL to the HomeController@index method:

Route::get('/', 'HomeController@index')->name('home');
  1. Creating language middleware:

Create a new middleware called SetLocale.php inside the app/Http/Middleware directory and add the following code:

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class SetLocale
{
    public function handle(Request $request, Closure $next)
    {
        if (app()->isLocale($request->segment(1))) {
            app()->setLocale($request->segment(1));
        }

        return $next($request);
    }
}

Next, register the middleware in the app/Http/Kernel.php file:

protected $routeMiddleware = [
    // ...
    'locale' => \App\Http\Middleware\SetLocale::class,
];

Finally, add the middleware to the $middlewareGroups array:

protected $middlewareGroups = [
    // ...
    'web' => [
        // ...
        \App\Http\Middleware\SetLocale::class,
    ],
];
  1. Creating language views with Vue.js 3:

To create multilingual views with Vue.js 3, create a new component called Welcome.vue inside the resources/js/components directory and add the following code:

<template>
  <div>
    <div class="alert alert-info">
      {{ $t('welcome') }}
    </div>
  </div>
</template>

<script>
import { createI18n } from 'vue-i18n'

export default {
  setup() {
    const i18n = createI18n({
      locale: useLocale(),
      messages: {
        'en': require('../resources/lang/messages_en.json'),
        'es': require('../resources/lang/messages_es.json'),
      },
    })

    return { i18n }
  },
}
</script>

Next, create a new JSON file called messages_en.json inside the resources/lang/messages directory for English messages and a similar file for Spanish messages:

{
  "welcome": "Welcome to the application"
}

Finally, import the Welcome.vue component into the resources/js/app.js file and add it to the components array:

import Vue from 'vue'
import App from './App.vue'
import Welcome from './components/Welcome.vue'

Vue.component('welcome', Welcome)

new Vue({
  render: h => h(App),
}).$mount('#app')
  1. Best practices and techniques:

Some best practices and techniques for handling multilingual data in Laravel 10 and Vue.js 3 include:

Tutorial Package Freelancing