Unlock Multilingual Support with Filament Language Switcher

In this article, we are exploring the Multilingual support with filament admin panel.

Laravel Language

Before diving into filament language and language switch, lets dive on how actually localization works on laravel. For that, we have 2 ways.

Store in File

So, the first option is to store the translation string in lang directory. If you didnot see any files or folder related to lang, hit the command below in your terminal.

php artisan lang:publish

So, now you can see the lang/language_code/features.php.

Suppose you have 2 languages en and es. Then we can do the following:

FOR “en”: lang/en/messages.php and in this folder we will return an array of key value. For example:

<?php

// lang/en/messages.php

return [
    'welcome_codedailly' => 'Welcome to Code Dailly!',
];

So, now we can easily use them as: messages. welcome_codedailly wherever we want.

For “es”: lang/es/messages.php and in this folder we will return an array of key value. For example:

<?php

// lang/en/messages.php

return [
    'welcome_codedailly' => '¡Bienvenido a Code Daily!',
];

Store as json

The second easiest way is to create the json file and return the data from there. Same as before , but now we will directly create en.json and es.json file and write the translation key and value there.

en.json

{
    "welcome_codedailly": "Welcome to Code Dailly!"
}

es.json

{
    "welcome_codedailly": "Bienvenido a Code Daily!"
}

These are the 2 ways of storing the translations in laravel app.

Using translations

Now, the case is how we can use translation in our system. We store the keys and their respective values. Now, we can use them using following methods:

1. Using helper function: The easiest way to retrieve the translation is using the helper function ‘__()‘.
   • __(‘messages.welcome_codedailly’)
   • @lang(‘messages.welcome_codedailly’)

I highly recommend to check out the official docs for localization.

Filament Setup

For filament, we will be using a package for language translator. Here is the link of the package that we will be using. Translation Manager

1. Install the pacakge

composer require kenepa/translation-manager
php artisan vendor:publish --tag=translation-manager-config
php artisan vendor:publish --provider="Spatie\TranslationLoader\TranslationServiceProvider" --tag="migrations"

2. Register the plugin

 public function panel(Panel $panel): Panel
    {
        return $panel
            // ...
            ->plugin(TranslationManagerPlugin::make());
    }

3. Modify your config file for language setup

Add the locales you want.

'available_locales' => [
    ['code' => 'en', 'name' => 'English', 'flag' => 'gb'],
    ['code' => 'nl', 'name' => 'Nederlands', 'flag' => 'nl'],
    ['code' => 'de', 'name' => 'Deutsch', 'flag' => 'de']
]

By following this, we can easily setup language translator as well as language switcher in our filament application.

Conclusion

I highly recommend using lang/key/features.php way of registering the translations keys rather than storing then in JSON format. If you have any confusion regarding this, please comment it down.