Laravel Livewire Installation & Layout Setup
LARAVEL
LIVEWIRE
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.
Comments (1)
Step 04 should start with "php artisan make:livewire crud/IndexComponent" not "php artisan make:livewire IndexComponent". ("crud/" is missing.)>
Leave a Comment
You need to login to post a comment
Login to Comment