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

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

To build a multilingual web application using Laravel 11 and Vue.js, you can follow the steps below:

1. Set up Laravel for multilingual support:

First, you need to set up Laravel for multilingual support. Laravel provides a built-in localization feature that you can use to manage translations.

a. Install the Laravel localization package:

Run the following command to install the Laravel localization package:

composer require laravel/laravel:^8.x --with-dev

b. Configure the localization settings:

Open the config/app.php file and add the following line to the providers array:

Laravel\LaravelLocalization\LaravelLocalizationServiceProvider::class,

Next, open the config/app.php file and add the following lines to the aliases array:

'Lang' => Laravel\LaravelLocalization\Facades\LaravelLocalization::class,
'Locale' => Laravel\LaravelLocalization\Facades\Locale::class,

c. Set the default language:

Open the .env file and set the APP_LOCALIZATION and APP_FALLBACK_LOCALIZATION variables to the desired language codes:

APP_LOCALIZATION=en
APP_FALLBACK_LOCALIZATION=en

d. Create language files:

Create a new directory named resources/lang and create subdirectories for each language you want to support. For example, create a resources/lang/en and resources/lang/fr directory for English and French, respectively.

Create a file named app.php inside each language directory and add the following content:

<?php

return [
    // ...
];

2. Set up Vue.js for multilingual support:

To use Vue.js for multilingual support, you can use the vue-i18n library.

a. Install the vue-i18n library:

Run the following command to install the vue-i18n library:

npm install vue-i18n --save

b. Configure Vue.js for multilingual support:

Open the src/main.js file and add the following lines at the beginning of the file:

import Vue from 'vue'
import App from './App.vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en', // set default locale
  fallbackLocale: 'en', // set fallback locale
  messages: {}, // set translations
})

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

c. Create translation files:

Create a new directory named src/locales and create subdirectories for each language you want to support. For example, create a src/locales/en and src/locales/fr directory for English and French, respectively.

Create a file named index.js inside each language directory and add the translations for each key:

export default {
  en: {
    greeting: 'Hello, world!',
  },
  fr: {
    greeting: 'Bonjour, monde!',
  },
}

d. Import translation files:

Import the translation files in the src/main.js file:

import i18n from './i18n'
import en from './locales/en/index.js'
import fr from './locales/fr/index.js'

i18n.mergeLocaleMessage('en', en)
i18n.mergeLocaleMessage('fr', fr)

3. Use translations in components:

To use translations in components, you can use the $t method provided by vue-i18n.

For example, in a component template:

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

4. Switch languages:

To switch languages, you can use the $i18n property provided by vue-i18n.

For example, in a component method:

methods: {
  switchLanguage(locale) {
    this.$i18n.locale = locale
  },
},

Or, in a component template:

<template>
  <div>
    <button @click="switchLanguage('fr')">Switch to French</button>
    <button @click="switchLanguage('en')">Switch to English</button>
    <h1>{{ $t('greeting') }}</h1>
  </div>
</template>

That's it! You have now built a multilingual web application using Laravel 11 and Vue.js.