Setup separate layouts for the frontend and for the admin panel in your Laravel Livewire project

1. Define Frontend & Admin Layouts in Blade Templates

Ensure your resources/views/layouts folder has these two layout files:

• resources/views/layouts/app.blade.php (Frontend Layout)
• resources/views/layouts/admin-app.blade.php (Admin Layout)

2. Use Layouts in Livewire Components

In Livewire components, you can specify which layout to use by updating the render method.

Frontend Livewire Component Example

For frontend components, use app.blade.php:

public function render()
{
return view(‘livewire.frontend-component’)->layout(‘layouts.app’);
}

Admin Panel Livewire Component Example

For admin components, use admin-app.blade.php:

public function render()
{
return view(‘livewire.admin-component’)->layout(‘layouts.admin-app’);
}

3. Blade Template Example for Components

Your Livewire components should extend these layouts:

Example Frontend Blade View (resources/views/livewire/frontend-component.blade.php)

@extends('layouts.app')

@section('content')
<h1>Welcome to Frontend</h1>
@endsection

Example Admin Blade View (resources/views/livewire/admin-component.blade.php)

@extends('layouts.admin-app')

@section('content')
<h1>Admin Dashboard</h1>
@endsection

4. Using Routes to Separate Frontend & Admin Panel

Define separate routes for frontend and admin:

Routes in web.php

use App\Http\Livewire\FrontendComponent;
use App\Http\Livewire\AdminComponent;

Route::get('/', FrontendComponent::class); // Frontend route
Route::get('/admin', AdminComponent::class)->name('admin.dashboard'); // Admin route

Summary:

• Define separate layout files (app.blade.php for frontend, admin-app.blade.php for admin).
• Use ->layout('layouts.app') or ->layout('layouts.admin-app') in Livewire components.
• Create separate Livewire components for frontend and admin.
• Use routes to separate frontend (/) and admin (/admin).
• Optionally, use middleware to protect the admin panel.