DEV Community

Snehal Kadwe
Snehal Kadwe

Posted on

How to install Laravel and Livewire

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 AJAX call 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 Full Javascript frameworks like VUE and REACT.

What we will see in this blog.

  1. Laravel Installation
  2. Laravel Scaffolding
  3. Livewire Installation
  4. Livewire component creation

First we will start with Laravel Installation

 composer create-project laravel/laravel laravel-livewire-ex
Enter fullscreen mode Exit fullscreen mode

Now to to newly created laravel project usin cd laravel-livewire-ex

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 - npm install
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
Enter fullscreen mode Exit fullscreen mode

Now its time to install Livewire in your Laravel project,
run following command to install livewire.

 composer require livewire/livewire
Enter fullscreen mode Exit fullscreen mode

you have now successfully installed livewire, the next step is to include livewire's Javascript and Styles in your base file which we are going to use in overall project (In our example open a app.layout file and add livewire style, script to it) as given below.

 @livewireStyles
 </head>
 <body>
   .....
 @livewireScripts
 </body>
 </html>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • It will create two file - 1st is component and 2nd is view file
.
    CLASS: app/Http/Livewire/WelcomeMsg.php
    VIEW: resources/views/livewire/welcome-msg.blade.php

  • In class file it will return a view/component.

  • Now, open our view file which is in resources/views/livewire/welcome-msg.blade.php and 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.

Discussion (0)