What is Livewire and Why we use it?
Livewire is a full-stack framework for laravel which makes it simple to build modern, reactive, dynamic interfaces without leaving the comfort of laravel and its blade template.
Livewire component makes the
AJAXcall to the server with data and server re-rendered the component with new HTML without reloading the whole page and will intelligently mutates the DOM with updated data.
Livewire is great stack which provides the experience of SPA’s like VUE, REACT without including their complexity.
Livewire can be used when we want build a modern, dynamic and reactive application but don’t want to use
What we will see in this blog.
- Laravel Installation
- Laravel Scaffolding
- Livewire Installation
- Livewire component creation
First we will start with Laravel Installation
composer create-project laravel/laravel laravel-livewire-ex
Now to to newly created laravel project usin
After that we need to create a scaffolding using laravel breeze by using following command -
Step 1 -
composer require laravel/breeze --dev
Step 2 -
php artisan breeze:install
Step 3 -
Step 4 -
npm run dev
Now you have successfully created login and registration scaffolding.
Now create a database and put the database name in your
.env file, after that you need to run migration
php artisan migrate
Now its time to install Livewire in your Laravel project,
run following command to install livewire.
composer require livewire/livewire
app.layout file and add livewire style, script to it) as given below.
@livewireStyles </head> <body> ..... @livewireScripts </body> </html>
Yeah We have now successfully installed laravel and livewire, now we will see how to create livewire file and use it in our larval component.
Run following command -
php artisan make:livewire welcomeMsg
It will create two file - 1st is component and 2nd is view file .
In class file it will return a view/component.
Now, open our view file which is in
resources/views/livewire/welcome-msg.blade.phpand add "Welcome this is my First Laravel Livewire Project" message in it (or any message that you want to display on screen.
After that we will add this component where we need to use it.
Open a Dashboard blade file and add
<livewire:welcome-msg />component to it, now open your browser and register yourself first after login you will see the welcome msg on your dashboard.
Yeah!! you have successfully created your first laravel livewire project.
Thank you for reading.
Please subscribe for more blog posts.