Localization

DO THIS FIRST

Follow the instructions on how to install the localization packages in a new Laravel project.
After publishing the language files, you see a new directory called lang in the root of your project.

Laravel's localization features 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 (not visible by default). Within this directory, there should be a subdirectory for each language supported by the application.

Here you can see the default (English) views for the error 404-page and the login page:

Suppose you have installed the Dutch localization packages and published them like we did in the previous chapter. Now we can open the .env file and set the default language to Dutch (APP_LOCALE=nl). The fallback language is set to English (APP_FALLBACK_LOCALE=en) and will be used when a translation is not available in the selected language.

APP_LOCALE=nl            // change from en to nl
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=en_US

Here you can see the same pages, but fully translated to Dutch:

Translatable content will always be wrapped within the __('...') helper function. In Laravel localization, there are two main approaches to translating content:

• Direct string translation like __('Not Found'):
  • translates a simple string directly
  • looks for this exact string in language files (typically in lang/nl.json for Dutch)
  • best for simple, standalone phrases
  • ses JSON translation files for direct string mapping
• Keyed translation like __('pagination.previous')
  • uses a dot notation to access nested translations
  • references structured arrays in PHP language files in the lang/nl directory
  • better for organized, categorized translations
  • uses PHP files with arrays for structured translations

Direct String Translation

The examples above both use direct string translation methods.

TIP

If you haven't done so already, publish the error pages first by running the following command:

php artisan vendor:publish --tag=laravel-errors

• Open the resources/views/errors/404.blade.php and lang/nl.json files

• The title and message of the page are surrounded with __('Not Found')

@extends('errors::minimal')

@section('title', __('Not Found'))         
@section('code', '404')
@section('message', __('Not Found'))        

Keyed Translation

The Livewire pagination component uses keyed translation. After publishing the Livewire pagination component with the command php artisan livewire:publish --pagination, you can find the pagination component in the resources/views/vendor/livewire/tailwind.blade.php file. The translation can be found in the lang/nl/pagination.php file.

<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
    <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
                <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 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.previous') !!}   
                </button>
            @endif
        </span>
    
        <span>
            @if ($paginator->hasMorePages())
                <button type="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
                <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md select-none">
                    {!! __('pagination.next') !!}   
                </span>
            @endif
        </span>
    </div>
    ...
</nav>

The result of the translation can be seen in the pagination component on the shop page.