- Hello, Visitor
- Monday, February 17, 2025
Search Result
Laravel Livewire Installation & Layout Setup
Posted by NzCoding - 05 February 2022

Hello friends, today in this blog you’ll learn how to install laravel livewire and setup livewire layout for livewire components.
Laravel Livewire is a library that makes it simple to build modern, reactive, dynamic interfaces using Laravel Blade as your templating language. This is a great stack to choose if you want to build an application that is dynamic and reactive but don't feel comfortable jumping into a full JavaScript framework like Vue.
Now, lets see how we can install laravel livewire and setup livewire layout for livewire components.
You can also check our video tutorial about how to install laravel livewire and setup livewire layout for livewire components.
Video Tutorial of laravel livewire installation
Step 01
Install laravel with the following commands
composer create-project --prefer-dist laravel/laravel <your_app_name>
or,
laravel new <your_app_name>
Step 02
It will take some time to install. After that install livewire using composer. Go to your project folder and run following command
composer require livewire/livewire
Step 03
Cearte base layout file with this command
php artisan make:livewire layouts/base
This will make two file one is in App/Http/livewire/layouts directory named base.php and another is in resources/views/livewire/layouts directory named base.blade.php
Now, go to base.blade.php file and use the following code,
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>NzCoding - Laravel</title>@livewireStyles</head><body>{{ $slot }}@livewireScripts</body></html>
Step 04
Now create another livewire component with following command
php artisan make:livewire IndexComponent
This will also make two file one is in App/Http/livewire directory named IndexComponent.php and another is in resources/views/livewire directory named index-component.blade.php
Now, go to index-component.blade.php file and use the following code,
<div><div class="container text-center"><h1>Index Component</h1></div></div>
and go to IndexComponent.php file and use the bellow code,
<?phpnamespace App\Http\Livewire;use Livewire\Component;class IndexComponent extends Component{public function render(){return view('livewire.crud.index-component')->layout('livewire.layouts.base');}}
Step 05
Now make a route to check that the installation is successfull or not,
go to, routes/web.php and use this code
Route::get('index', IndexComponent::class)->name('index');
Step 06
Now run the project with this command,
php artisan serve
after that open your browser and go to
http://127.0.0.1:8000/index
and if you can see output like the following image than you are successfully install livewire and setup livewire layout in laravel application.
Related posts
Building a Simple To-Do List with Laravel Livewire 3: Add & Delete Tasks in Real-Time
Laravel Livewire 3: Building Dynamic Web Apps Made Easy
Live Form Validation with Laravel Livewire
Auto Generate Slug with Laravel Livewire
Laravel Livewire Crud - Part 04 (Delete Data)
Laravel Livewire Crud - Part 03 (Edit Data)
Laravel Livewire Crud - Part 02 (Get Data from Database)
Laravel Livewire Crud - Part 01 (Add Data to Database)
Laravel Livewire Image Upload with Preview
Laravel Livewire CRUD with Bootstrap Modal
Popular Posts
Featured Post
Categories
- Html Css 7
- More 3
- Card Design 2
- Spinner 2
- GitHub 2
- Laravel 16
- Livewire 12
- Javascript 1
- Form Design 1
- SEO 1
- Php 0
Leave a Reply