Tag Archive for: livewire

In this post, we are going to explain the shortest path to add many languages to Laravel 8 including RTL language and language switcher.

1- Add languages to app/config/app.php file

'languages' => [
        'ar', 'en'
    ],

2- Create middleware component

php artisan make:middleware Localization

3- Add Localization class to web group in app/kernal file

\App\Http\Middleware\Localization::class,


4- In app/http/middleware/Localization.php

public function handle(Request $request, Closure $next)
    {
        $languages = config('app.languages');
        $lang = session()->has('lang') ? session()->get('lang') : '';
        if (in_array($lang, $languages)) {
            App::setLocale($lang);
        }
        return $next($request);
    }

5- In the web routes add the following route

Route::get('lang/{locale}', function ($locale) {
    $languages = config('app.languages');
    if (in_array($locale, $languages)) {
        session()->put('lang', $locale);
    }
    return redirect()->back();
})->name('setlanguage');

6- Add languages switcher in the Navbar
@foreach (config('app.languages') as $locale)
> a href="{{ route('setlanguage', $locale) }}"
class=" {{ app()->getLocale() == $locale ? ' border dark:border-white border-gray-800' : '' }} p-1 m-1 rounded-md hover:text-white active:text-white focus:text-white">
@if ($locale == 'ar')
AR flag
@elseif($locale == 'en')
EN flag
@endif
>/a>
@endforeach

7- Add language file in lang folder
ar.json for example and add json array to it.

Done.

There are many tutorials about installing Laravel 8 with the necessary tools and packages.Also the steps to install dark and light, system mode. In addition to adding the proper way to install mutil-lingual site. Here I’m going to put all the effort and installation steps in one place so easy to recall and follow. Before starting, we would like to install the following:

1- Laravel 8.x

2- Jetstream and livewire

3- Tailwindcss 3.x

4- Spatie roles and permissions management

5- Turbo links for faster navigation and surfing pages.

6- Alpinejs for dynamic dropdown, navigation, and other user interactions.
7- Add themes
8- Add multi-languages
So let us start.

Install Laravel and Packages

1- Install fresh Laravel

 laravel new project_name 

2- Generate key

 php artisan key:generate

3- Setup database and app name from .env
4- Install Jetstream with livewire

 composer require laravel/jetstream
 php artisan jetstream:install livewire 

5- Install npm package

 npm install
 npm run dev
 php artisan migrate 

6- Publish jetstearm views

 php artisan vendor:publish --tag=jetstream-views
npm run dev 

7- Install spatie roles and permissions

 composer require spatie/laravel-permission
 php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"
 php artisan migrate:fresh --seed

Optional: The service provider will automatically get registered. Or you may manually add the service provider in your config/app.php file:

 'providers' => [
    // ...
    Spatie\Permission\PermissionServiceProvider::class,
]; 

You should publish the migration and the config/permission.php config file with:

 php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider 

 

8- Add HasRoles to User model and add to header file

use Spatie\Permission\Traits\HasRoles;

 

9- Schema::defaultStringLength(125) maybe not necessary
10 – Clear your web cache.

 php artisan config:clear
 php artisan view:clear
 php artisan cache:clear
 php artisan route:cache
 composer dump-autoload 

 

11- Install Tailwindcss
Tailwindcss the latest version comes automatically with Laravel. However if you want to install it or update it.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

 

12- Install Alpinejs
Alpinejs already installed in Laravel 8 by default. However, if you want to instaal/update it.

npm install alpinejs
npm run watch

 

13- Add turbo links

 composer require tonysm/turbo-laravel

14- Turbo Laravel scaffolding install with jetstream

 php artisan turbo:install --jet 

Then, you can run install your NPM dependencies and compile your assets normally.

npm install

You may wants to add trubolinks to web

namespace App\Http;
use Illuminate\Foundation\Http\Kernel as HttpKernel;
class Kernel extends HttpKernel
{
    protected $middlewareGroups = [
        'web' => [
            \Tonysm\TurboLaravel\Http\Middleware\TurboMiddleware::class,
            // other middlewares...
        ],
    ];
}

15- Add social login package

 composer require laravel/socialite

Create Multi-themes

Add Dark, light, and system mode.

Create Multilingual Website

Please read how to create a multilingual website on this website.