Language Switching in Laravel: A Step-by-Step Guide to Multilingual Websites
Tags: php, laravel
Published: 2023-06-18 16:08:56




Hi, developers. 🙋‍♂️
---
Today we will learn how to Easily Implement Language Switching and Translation in Your Laravel Project. Let's get started!

**Why is it important to implement language switching and translation in a Laravel project?**🕵️‍♂️

Creating a website that supports multiple languages is crucial for connecting with a diverse audience. In this guide, we will walk through the process of implementing switching and translation in a Laravel project. By following these `step-by-step` instructions, you'll be able to create a user-friendly language switcher and easily translate your website's content. 

**Step 1:** Set Up Your Laravel Project.

To begin, create a new Laravel project using the Laravel Composer. This will serve as the foundation for implementing the language switching and translation functionality.

`composer create-project laravel/laravel LaravelLingo`

**Note:** Make sure you run your php install

**Step 2:** Add Language Switch Form
Create a language switch form component that allows users to select their preferred language. This component can be included in your views using Blade templating. The form should include options for each language you want to support.

- Under `resources/views directory`, create a folder components
- create a file name it `language-switch.blade.php` under components directory.
- Create a switcher form, the form should look like this:

`language-switch.blade.php`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/poxopzqctgyk8i2i0i0m.png)

The form's value will contain the language picked by the user and will be submitted to `language.switch` route

**Note:** Today we will use `onchange="this.form.submit()"` inside the form just for demonstration, you are free to use other methods to submit the form with the picked language

Laravel provides built-in localization features that allow you to easily manage language files and translations. Make sure localization is enabled in your Laravel application by checking the `config/app.php` file. The locale option should be set to the default language (English in your case) and the `fallback_locale` option should also be set, as showing bellow.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lip0lrv1mkxpl7yird0c.png)

**Step 3:** Include your language switcher in your `welcome.blade`.
Inside your welcome.blade, include the component language-switcher or depends on where you want to implement it.

`welcome.blade.php`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rylt6ddpujb01a5voqqz.png)

Now, lets display a simple message when user switch the language. for example 

`'Welcome to the home page!'`

-Add html tags to display the message above or under the switch container, for example


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12zdb6fdc9o2k8msd611.png)

in the welcome page above will have two messages, a message will show the language picked using the switch and the translation of the message to different languages, Today we will use French and Arabic.

So to be able to fetch the translation of the message displayed we will have to follow some more steps: 

HOW IT WORKS?

**Step 4:** Create Language Route

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d8oxaewm7hc7h0bmmpn.png)

**Step 5:** Create language Controller

run `php artisan make:controller LanguageController`

`LanguageController.php`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tx4xop0dxxnhgh10h14g.png)

The code above will store the language in the session and return a variable `language_switched` which will be used later in the welcome.blade 

**Step 5:** Create A Middleware
The middleware will fetch to new picked language from session and set the local to the new language

`php artisan make:middleware LanguageMiddleware`

LanguageMiddleware.php

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6t55wz8r13nspabueija.png)

as mentioned above, the middleware will setLocale to the new language fetched from the session.

**Note:**If you want to check if local language is correctly set, use laravel log by adding a line code. 

```
Log::info("Locale set to: " . $language . " (Selected language: " . $language . ")");
```
Go to  `storage/logs/laravel.log` file to check, you should see results below every time we switch language.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jf89pd25hsonnmhggdi.png)

**Step 6:** Register Middleware.

Now we need to register the middleware, go to `Http/Kernel.php` and place your middleware as below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3jms7km4xfjhoi7gdgu.png)


**Step 5:** Translate The Text
The fun part, let's translate the welcome message, do you remember it?
`'Welcome to the home page!'`

Create two subdirectories under `resources/lang` folder one for French language`(fr)` and one for Arabic`(ar)`
Your directory should look like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xujo7iic22ek3px54jqf.png)

Inside each directory, create a file called `messages.php`

-French:
`resources/lang/fr/messages.php`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4wgmm5gejawnk4srmvz.png)

-Arabic:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rpi21docklv11fjlx0a.png)

Each messages file should contain the translation of the message you need to translate and give a name so we can call it later from welcome.blade.php file

**Step 7:** Lets test it.
To access the translation of each text you want to display based on the language picked, laravel has a helper` (__) `double underscore followed by the name of the text, here we are using what so called 'welcome'.

```
<div class="text-message">
     <p>{{__('messages.welcome')}}</p>
</div>
```
Since laravel local is set to `en` for English by default, the message will be

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxsjwy8kpf7jx8yml9dq.png)

Output:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edneyw6nfuebxkn6gyw2.png)

Switch to French:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voyrpw4s2aa5bqfz0bs8.PNG)

Switch to Arabic:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qmojwg35nosx69goklg.png)

<u>**Conclusion:**</u>

Congratulations!👏🏻👏🏻👍🏻
  
You have successfully implemented language switching and translation in your Laravel project. By following these steps, you can provide a localized experience to your users.