In this tutorial, we are going to learn how to implement a multilingual website using Laravel. This localization feature provide facility to retrieve strings in various languages by allowing us to support the multiple languages within our application.

Prerequisites

  • Laravel
  • To Continue with this tutorial, you should have installed Laravel 8 in your pc. If you are still not installed Laravel in your machine you can configure it from here.

    Setting up the Project

    First you need to create a new laravel project by running below command in your terminal
    1
    composer create-project laravel/laravel laravel-localization

    Then navigate to your project directory by using below command in your terminal

    1
    cd laravel-localization

    This command will create a fresh laravel project for us. In this tutorail, we don’t need to connect our application to Database because we work with the front-end. By default, Laravel’s local language is en.
    You can find it on the 'locale' => 'en' section in the config->app.php file.

    Creating Translation Files

    In this tutorial, I am going to add four more languages apart from English.
    1. Spanish
    2. French
    3. Japanese
    4. Sinhala

    Now you should need to create a seperate folder for each langauge inside the resources -> lang folder. To find naming conventions for your folders,please refer this.

    • Example: Spanish -> es

    Now, inside all of the five folders, create a file called message.php and add the following code.

    en -> message.php file:

    1
    2
    3
    4
    5
    <?php

    return [
    'welcome' => 'Welcome to Laravel Localization'
    ];

    es -> message.php file:

    1
    2
    3
    4
    5
    <?php

    return [
    'welcome' => 'Bienvenido a Laravel Localization'
    ];

    fr -> message.php file:

    1
    2
    3
    4
    5
    <?php

    return [
    'welcome' => 'Bienvenue dans la localisation de Laravel'
    ];

    jp -> message.php file:

    1
    2
    3
    4
    5
    <?php

    return [
    'welcome' => 'ローカリゼーションへようこそ'
    ];

    si -> message.php file:

    1
    2
    3
    4
    5
    <?php

    return [
    'welcome' => 'ආයුබෝවන් ලාරාවෙල් බහුභාෂා උදාහරණය'
    ];

    You can put many texts as you want. I have just taken one text for demostration. Now we have already placed all thetranslations in place, let’s start working on the views and make our application load above translations.

    Setup the view

    Inside resources -> views folder create, folder called layouts. Then create an app.blade.php file inside i and add the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Meta -->
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    @if (isset($title))
    <title>{{ $title }}</title>
    @else
    <title>Laravel Localization</title>
    @endif

    <link href="{{ asset('assets/lib/font-awesome/css/font-awesome.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/lib/Ionicons/css/ionicons.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/lib/perfect-scrollbar/css/perfect-scrollbar.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/lib/jquery-switchbutton/jquery.switchButton.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/lib/rickshaw/rickshaw.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/lib/chartist/chartist.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/lib/highlightjs/github.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/lib/datatables/jquery.dataTables.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/lib/select2/css/select2.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/zoom.css') }}" rel="stylesheet">

    <link rel="stylesheet" href="{{ asset('assets/css/bracket.css') }}">

    @yield('css')

    </head>

    <body>

    @include('layouts.inc.left_nav')

    @include('layouts.inc.top_navbar')


    <div class="br-mainpanel">

    @yield('content')

    </div>


    <script src="{{ asset('assets/lib/jquery/jquery.js') }}"></script>
    <script src="{{ asset('assets/lib/popper.js/popper.js') }}"></script>
    <script src="{{ asset('assets/lib/bootstrap/bootstrap.js') }}"></script>
    <script src="{{ asset('assets/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.js') }}"></script>
    <script src="{{ asset('assets/lib/moment/moment.js') }}"></script>
    <script src="{{ asset('assets/lib/jquery-ui/jquery-ui.js') }}"></script>
    <script src="{{ asset('assets/lib/jquery-switchbutton/jquery.switchButton.js') }}"></script>
    <script src="{{ asset('assets/lib/peity/jquery.peity.js') }}"></script>
    <script src="{{ asset('assets/lib/chartist/chartist.js') }}"></script>
    <script src="{{ asset('assets/lib/jquery.sparkline.bower/jquery.sparkline.min.js') }}"></script>
    <script src="{{ asset('assets/lib/d3/d3.js') }}"></script>
    <script src="{{ asset('assets/lib/rickshaw/rickshaw.min.js') }}"></script>

    <script src="{{ asset('assets/lib/highlightjs/highlight.pack.js') }}"></script>
    <script src="{{ asset('assets/lib/datatables/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('assets/lib/datatables-responsive/dataTables.responsive.js') }}"></script>
    <script src="{{ asset('assets/lib/select2/js/select2.min.js') }}"></script>


    <script src="{{ asset('assets/js/bracket.js') }}"></script>
    <script src="{{ asset('assets/js/ResizeSensor.js') }}"></script>
    <script src="{{ asset('assets/js/dashboard.js') }}"></script>

    @yield('js')

    <script>
    $(function() {
    'use strict'
    $(window).resize(function() {
    minimizeMenu();
    });

    minimizeMenu();

    function minimizeMenu() {
    if (window.matchMedia('(min-width: 992px)').matches && window.matchMedia('(max-width: 1299px)')
    .matches) {
    // show only the icons and hide left menu label by default
    $('.menu-item-label,.menu-item-arrow').addClass('op-lg-0-force d-lg-none');
    $('body').addClass('collapsed-menu');
    $('.show-sub + .br-menu-sub').slideUp();
    } else if (window.matchMedia('(min-width: 1300px)').matches && !$('body').hasClass(
    'collapsed-menu')) {
    $('.menu-item-label,.menu-item-arrow').removeClass('op-lg-0-force d-lg-none');
    $('body').removeClass('collapsed-menu');
    $('.show-sub + .br-menu-sub').slideDown();
    }
    }
    });

    </script>
    </body>
    </html>

    Note: Here I have used a premium and licensed template to get a better and interactive output from our application. If you need to use this template you need to purchase it from it's respective owners.

    Next, you need to create a folder called inc in layouts directory and create two seperate file called left_nav.blade.php and top_navbar.blade.php and paste below codes:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!-- left_nav.blade.php-->
    <div class="br-logo"><a href=""><span>[</span>Localization<span>]</span></a></div>
    <div class="br-sideleft overflow-y-auto">
    <label class="sidebar-label pd-x-15 mg-t-20">Navigation</label>
    <div class="br-sideleft-menu">
    <a href="/" class="br-menu-link active">
    <div class="br-menu-item">
    <i class="menu-item-icon icon ion-ios-home-outline tx-22"></i>
    <span class="menu-item-label">Dashboard</span>
    </div>
    </a>
    </div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    <!-- top_navbar.blade.php-->

    <div class="br-header">
    <div class="br-header-left">
    <div class="navicon-left hidden-md-down"><a id="btnLeftMenu" href=""><i
    class="icon ion-navicon-round"></i></a></div>
    <div class="navicon-left hidden-lg-up"><a id="btnLeftMenuMobile" href=""><i
    class="icon ion-navicon-round"></i></a></div>
    <div class="input-group hidden-xs-down wd-170 transition">
    <input id="searchbox" type="text" class="form-control" placeholder="Search">
    <span class="input-group-btn">
    <button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
    </span>
    </div>
    </div>
    <div class="br-header-right">
    <nav class="nav">
    <div class="dropdown">
    <ul class="navbar-nav ml-auto">
    @php $locale = session()->get('locale'); @endphp
    <li class="nav-item dropdown">
    <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
    @switch($locale)
    @case('us')
    <img src="{{asset('img/us.png')}}"> English
    @break
    @case('fr')
    <img src="{{asset('img/fr.png')}}"> French
    @break
    @case('es')
    <img src="{{asset('img/es.png')}}"> Spanish
    @break
    @case('jp')
    <img src="{{asset('img/jp.png')}}"> Japanese
    @break
    @case('si')
    <img src="{{asset('img/lk.png')}}"> Sinhala
    @break
    @default
    <img src="{{asset('img/us.png')}}"> English
    @endswitch
    <span class="caret"></span>
    </a>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="lang/en"><img src="{{asset('img/us.png')}}"> English</a>
    <a class="dropdown-item" href="lang/fr"><img src="{{asset('img/fr.png')}}"> French</a>
    <a class="dropdown-item" href="lang/es"><img src="{{asset('img/es.png')}}"> Spanish</a>
    <a class="dropdown-item" href="lang/jp"><img src="{{asset('img/jp.png')}}"> Japanse</a>
    <a class="dropdown-item" href="lang/si"><img src="{{asset('img/lk.png')}}"> Sinhala</a>
    </div>
    </li>
    </ul>

    </div>
    </nav>
    </div>
    </div>

    Finally, add the following code inside the resources -> views -> welcome.blade.php file.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @extends('layouts.app')

    @section('content')

    <div class="d-flex align-items-center justify-content-center">
    <div class="wd-lg-70p wd-xl-50p tx-center pd-x-40">
    <h5 class="tx-xs-24 tx-normal tx-info mg-b-30 lh-5">{{ __('message.welcome')}}</h5>
    </div>
    </div>

    @endsection

    Create Middleware

    Now, create a middleware for using the following command:
    1
    php artisan make:middleware Localization

    It will create a file called Localization.php in app -> Http -> Middleware. then you should add below code inside it:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <?php

    namespace App\Http\Middleware;

    use Closure;
    use Illuminate\Http\Request;
    use App;

    class Localization
    {
    public function handle($request, Closure $next)
    {
    if (session()->has('locale')) {
    App::setlocale(session()->get('locale'));
    }
    return $next($request);
    }
    }

    Register the Localization Middleware

    Now add the middleware in App\Http\Kernel‘s $middlewareGroup’s array like this:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    protected $middlewareGroups = [
    'web' => [
    ...
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
    \App\Http\Middleware\Localization::class,
    ],

    'api' => [
    ...
    ],
    ];

    Create Controller

    Now, we nned to create controller called LocalizationController.php by running below command:

    1
    php artisan make:controller LocalizationController

    Then add following code inside it:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <?php

    namespace App\Http\Controllers;

    use App;
    use Illuminate\Http\Request;

    class LocalizationController extends Controller
    {
    public function index($locale)
    {
    App::setlocale($locale);
    session()->put('locale', $locale);
    return redirect()->back();
    }
    }

    Create Route

    Now, inside routes -> web.php, add the following code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <?php

    use Illuminate\Support\Facades\Route;
    use App\Http\Controllers\HomeController;

    Route::get('/', function () {
    return view('welcome');
    });

    Route::get('lang/{locale}', 'LocalizationController@index');

    Run our application

    Now we have already finished our application. Now we can run your application using below command:

    1
    php artisan serve

    Now, navigate to http://localhost:8000 in your browser, and you will see the drop-down with the five languages.Select the language, and you will see the welcome message in a different languages.

    Conclusion

    In this tutorial, we implemented multilingual web application in Laravel. If you have any issue regarding this tutorial, mention your issue in comment section or reach me through my E-mail. You can obtain complete source code and asset files for this tutorial from this GitHub repository.