Multilingualism in Laravel 11: How to create a multilingual web application using Laravel 11 and Vue.js?

Creating a multilingual web application using Laravel 11 and Vue.js involves several steps. In this answer, I will outline the process of building a multilingual application using these technologies.

Set up Laravel 11 project: First, create a new Laravel 11 project using the following command:

composer create --prefer-dist laravel/laravel myproject

Install Laravel localization package: To add multilingual support to Laravel, we will use the Laravel Localization package. Install it using Composer:

composer require yadakhovskyy/laravel-laravel-localization

Configure Laravel localization: Add the following lines to the .env file:

APP_LOCALES=en,es

Create a new file config/app.php and add the following lines:

'locale' => 'en',
'supported_locales' => ['en', 'es'],

Create language files: Create a new directory resources/lang and create two subdirectories en and es. Inside each directory, create a new file app.php and add some text in each file to translate. For example, in resources/lang/en/app.php, add:

return [
    'welcome' => 'Welcome to our website!',
];

And in resources/lang/es/app.php, add:

return [
    'welcome' => 'Bienvenido a nuestro sitio web!',
];

Create routes for language switching: Create two new routes in routes/web.php for language switching:

Route::get('/change-language/{locale}', 'LanguageController@changeLanguage')->name('changeLanguage');

Create LanguageController: Create a new controller LanguageController.php in the app/Http/Controllers directory and add the following code:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\App;

class LanguageController extends Controller
{
    public function changeLanguage(Request $request)
    {
        App::setLocale($request->locale);
        return redirect()->back();
    }
}

Create Vue.js application: Install Vue.js using the following command:

npm install vue

Create a new component LanguageSwitcher.vue in the resources/js/components directory and add the following code:

<template>
  <div>
    <select v-model="selectedLocale">
      <option v-for="locale in locales" :value="locale">{{ locale }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      locales: ['en', 'es'],
      selectedLocale: 'en'
    }
  },
  mounted() {
    this.selectedLocale = this.$i18n.locale
  },
  watch: {
    selectedLocale(newLocale) {
      this.$i18n.locale = newLocale
      this.$router.push({ path: '/change-language/' + newLocale })
    }
  }
}
</script>

import Vue from 'vue'
import App from './App.vue'
import LanguageSwitcher from './components/LanguageSwitcher.vue'
import VueI18n from 'vue-i18n'
import 'vue-i18n/dist/vue-i18n.css'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {}
})

Vue.component('language-switcher', LanguageSwitcher)

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

Add language files to Vue.js: Create a new directory src/locales inside the resources/js directory and create two subdirectories en and es. Inside each directory, create a new file app.js and add the following code:

export default {
  messages: {
    welcome: 'Welcome to our website!'
  }
}

Add the following lines to the app.js file:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'
import 'vue-i18n/dist/vue-i18n.css'
import en from './locales/en/app'
import es from './locales/es/app'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: { en, es }
})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

Create a layout file: Create a new file resources/views/layouts/app.blade.php and add the following code:

<!DOCTYPE html>
<html lang="{{ App::getLocale() }}">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ config('app.name', 'Laravel') }}</title>
  <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
  <div id="app">
    <language-switcher></language-switcher>
    <router-view></router-view>
  </div>
  <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Create a new component for the home page: Create a new component Home.vue in the resources/js/components directory and add the following code:

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
  </div>
</template>

Create a new route for the home page: Add the following line to the routes/web.php file:

Route::get('/', 'HomeController@index')->name('home');

Create a new controller HomeController.php in the app/Http/Controllers directory and add the following code:

namespace App\Http\Controllers;

use Illuminate\Routing\Controller;

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

Create a new view for the home page: Create a new file resources/views/welcome.blade.php and add the following code:

<!DOCTYPE html>
<html lang="{{ App::getLocale() }}">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ config('app.name', 'Laravel') }}</title>
</head>
<body>
  <div class="container">
    <home-component></home-component>
  </div>
</body>
</html>

import HomeComponent from './components/Home.vue'

new Vue({
  i18n,
  render: h => h(App),
  components: { HomeComponent }
}).$mount('#app')