# Localization

Laravel's localization features (opens new window) provide a convenient way to retrieve strings in various languages, allowing you to easily support multiple languages within your application
Language strings are stored in files within the lang directory in the root of your application. Within this directory there should be a subdirectory for each language supported by the application.
Here you see the default (English) views for the error 404-page page and the registration page:

All these pages can easily be translated to another language, for example Dutch

# Single language site (other than English)

WARNING

It's best to install the translation files immediately after creating a new Laravel project
If you already have a project, you can update your project with the command composer update and then install the translation files

There is a really nice package called Laravel-lang (opens new window) that provides a lot of translation language files for Laravel, Jetstream and all the other packages maintained by the Laravel team
Install this package, together with the Laravel Lang Publisher Package (opens new window), with the following command:

composer require laravel-lang/lang laravel-lang/publisher laravel-lang/attributes --dev

Next, publish the language file(s) you want to use with the following command:
(choose nl for Dutch, fr for French, etc.

php artisan lang:add nl

Most of the Dutch language files are now installed in the lang/nl directory and there is one extra lang/nl.json file

# Set the default language to Dutch

Open the config/app.php file, search for the locale key and set the value to nl

...
'locale' => 'nl',
...
'fallback_locale' => 'en',
...

1
2
3
4
5

Reload the 404-page and the registration page, and you will see that the pages are now in Dutch

# How does it work?

Translatable items are always surrounded with __() and contain:
- The default string value, in case the translation string is not found in the language.json file
- The name of the language file (before the dot) followed by the key inside the language file (after the dot)

# Translating a strings

Open the resources/views/errors/404.blade.php file, and you will see that the page some special syntax for the language strings: @section('message', __('Not Found'))
Translation strings are surrounded with __() and contain the default string value: 'Not Found'
Now open the file lang/nl.json, and you will see that the translation string is already there:

{
  ...
  "Not Found": "Niet gevonden",
  ...
}

1
2
3
4
5

Because our default language is set to Dutch and the translation string is already there, we see the Dutch translation Niet gevonden on the page
Temperately remove the translation string from the lang/nl.json file and reload the page (Not Found is shown on the page)

# Translation arrays

Static text translations are (mostly) stored in the lang/nl.json file, but other translations (validation messages, auth, ...) are stored in the lang/nl/xxxxx.php file
Let's go to the shop page, and make the page very small (so you can see the 'Previous' and 'Next' buttons)

Now open the Livewire component resources/views/vendor/livewire/tailwind.blade.php file that we published and modified earlier in this course

div class="flex justify-between flex-1 sm:hidden">
    <span>
        @if ($paginator->onFirstPage())
            <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md select-none">
                {!! __('pagination.previous') !!}
            </span>
        @else
            ...
        @endif
    </span>

    <span>
        @if ($paginator->hasMorePages())
            <button wire:click="nextPage('{{ $paginator->getPageName() }}')" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                {!! __('pagination.next') !!}
            </button>
        @else
            ...
        @endif
    </span>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Look at the translation string __('pagination.previous') (line 5) and __('pagination.next') (line 15)
- pagination (before the dot) refers to the name of the language file
- previous and next (after the dot) refers to the key inside that language file