How To Create Laravel Vue.js Multi Language Website

Hello Artisan, in this laravel vue js translation example tutorial you will learn how you can create multi language website in laravel and vue js. You know sometimes we need to create multilingual site in laravel. In just laravel it is very simple to do, but with vue it is not easier.

In this tutorial laravel vue multi language example, i will use composer require mariuzzo/laravel-js-localization npm package. You can do it using other package, but i will use this package to translate hard coded string into multilanguage in laravel and vue js website.

I use laravel localization feature in laravel, we can use those files and convert those files to a JSON file and then the rest is up to the client. In this example we just install Lang js via composer to convert the PHP key-value pair to JSON file.

Follow this laravel vue multi language tutorial to know step by step how to use laravel vue localization.

Step 1 : Install Package

In this step we have to install localization package to create laravel vue js multilanguage site. So install below package.

composer require mariuzzo/laravel-js-localization

Step 2: Update App.php file

Add the below service provider in config/app.php.

config\app.php

Mariuzzo\LaravelJsLocalization\LaravelJsLocalizationServiceProvider::class

After adding this now we can generate the JSON files by the following artisan command.

php artisan lang:js resources/js/vue-translations.js --no-lib --quiet

Step 3 : Install webpcak shell plugin

In this step now we have to run this command when we build the Vue files, We can make use of laravel mix to do the job. Install webpcak shell plugin first if it is not installed yet.

npm install --save-dev webpack-shell-plugin

Step 4: Install Vue Lang.js

So we are going to try it with Vue.js and a node package from the client-side.Assuming that Vue.js is already installed in your running project.

Now Let's use a node package called vue-lang-js

yarn add @eli5/vue-lang-js or npm install @eli5/vue-lang-js

Step 5: Update Webpack.mix file

Now we have to update webpack.mix.js file. Now update it like below.

webpack.mix.js

const WebpackShellPlugin = require('webpack-shell-plugin');

mix.webpackConfig({
  plugins:
    [
      new WebpackShellPlugin({onBuildStart:['php artisan lang:js resources/js/vue-translations.js --no-lib --quiet'], onBuildEnd:[]})
    ]
});

Step 6: Update app.js

In this step change app.js file where you have imported vue globally,  add these lines and import the JSON file generated.

resources/js/app.js

require('lang.js');
import VueLang from '@eli5/vue-lang-js'
// get the data source
import translations from './vue-translations.js';

Vue.use(VueLang, {
  messages: translations, // Provide locale file
  // locale: 'en', // Set locale
  fallback: 'en' // Set fallback lacale
});

Now all are set to go. You can translate now using the below method.

{{ $trans('file.key') }}

So now point is how could we get the current language and how to set the current language. That’s simple.

this.$lang.setLocale('en')

Fetch the current locale,

this.$lang.getLocale()

And one more important thing that would be useful is to store the current locale somewhere so that we can retrieve it and set the locale when the user comes in again.

So when the component mounted, just use this code to load it.

if (localStorage.getItem('locale')) {
  this.$lang.setLocale(localStorage.getItem('locale'));
} else {
  this.$lang.setLocale('en');
}

Recommended: Laravel 8.x Tips to Create Multilingual Website

I have used this mariuzzolaravel js localization package. Hope it will help you.