Laravel 8 Tutorial - Livewire Installation

In this tutorial, we are going to learn about Livewire installation in Laravel 8.

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

So, let's see how we can install and configure Livewire in Laravel 8.

First, let's create a new Laravel project. To create a new project, type:


composer create-project laravel/laravel laravel8livewire

Now, go inside the project directory and run the command:


cd laravel8livewire

Now, let's install Livewire. Just run the command:


composer require livewire/livewire

Alright, Livewire has been installed.

Now, let's open this project in Visual Studio Code. Switch to Visual Studio Code, click on "Open Folder", and select the project "laravel8livewire".

Now, just open the composer.json file. And here, you can see the Livewire version, which is 2.2.

Alright, now let's configure Livewire. For that, go to the views directory. Inside the views directory, let's create a new folder. And let's say the folder name is "layout".

Inside the layouts folder, create a new file. Let's say the file name is app.blade.php. Now, open this file and write 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>Livewire Project</title>
    @livewireStyles
</head>
<body>
    
    {{$slot}}

    @livewireScripts
</body>
</html>

Alright, now all the configuration is done.

In this way, we can install Livewire and configure it in Laravel 8.