Multi Language Settings

Let's add the French language.
HTML
  • Create a new file fr.json in the fr folder in the assets/lang folder and copy the en.json file code in this file.
  • Now you need to add the language in the assets/js/app.js file. In the function setLanguage, add the "Switch case" condition as below code and make sure to add the french.jpg file in the assets/images/flags folder. 
    case "fr":
    document.getElementById("header-lang-img").src = "assets/images/flags/french.svg";
break;
  • You can simply use key attributes in the HTML tag to convert the language text. Example: <div data-key="t-title">This is title.</div>

  • Add the below dropdown in the partials/topbar.html file in the language dropdown. 

    <!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="fr" title="French">
    <img src="assets/images/flags/french.jpg" alt="user-image" class="me-2 rounded" height="18">
    <span class="align-middle">French</span>
</a>
Laravel
  • Create new file translation.php in the fr folder in the /lang folder and add the below code. 
    <?php
// translation.php
return [
'Test' => 'Test'
];
  • Now you need to add the language in the resources/views/layuots/topbar.blade.php file. 
    @case('ru')
    <img src="{{ URL::asset('build/images/flags/russia.jpg')}}" alt="Header Language" height="16">
@break


<a href="{{ url('index/ru') }}" class="dropdown-item notify-item language" data-lang="ru">
    user-image Russian
</a>
  • You need to add the new language option in the topbar resounrces/views/layouts/topbar.blade.php. Make sure to add it flag image and option in the dropdown.

After completing these above steps you need to run the command npm run build command in the project directory. After running this process you need to run the command php artisan serve . It will serve your app on the localhost.

© Skote.