How to install Laravel and Livewire
Tags: laravel, webdev, beginners, codenewbie
Published: 2022-03-08 13:13:32

**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**
```php
 composer create-project laravel/laravel laravel-livewire-ex
```
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
 php artisan migrate
```

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

```php
 composer require livewire/livewire
```
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.

```javascript
 @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 
 php artisan make:livewire welcomeMsg
```

* 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.***
:unicorn: :heart: 

Please subscribe for more blog posts.
{% link https://dev.to/snehalkadwe/what-is-composition-api-in-vue-3-157k %}