Name: Install Laravel Livewire
Availability: InStock

Install Laravel Livewire

So, we are ready to set up the livewire package in our Laravel project. It is also very simple. Run the following command in your project.

composer require livewire/livewire

Locate the welcome.blade.php page and open it. You can find it inside your Laravel install at “resources/views/welcome.blade.php”.

Once the page is opened, delete all the content and add in the following boilerplate code.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body> 
Some Text Here
</body>
</html>

To finish the install of Livewire, we just need to include the Blade directives in the head tag, and before the end body tag in the page.

Something like:

<html>
<head> 
    ... 
    @livewireStyles
<head>
<body> 
... 
@livewireScripts
</body> 
</html>

So the code should be:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title> 
    @livewireStyles
</head>
<body> 
Some Text Here 
<!-- scripts --> 
@livewireScripts
</body>
</html>

That’s it! That’s all you need to start using Livewire.

For the design of the page, we will be relying on Bootstrap 5. We will use the CDN:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Learn more about Bootstrap 5

The final code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title> @livewireStyles
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body> 
Some Text Here 

<!-- scripts --> 
@livewireScripts
</body>
</html>

To preview what this looks like in the browser:

In the terminal type: php artisan serve
In the browser, open: http://localhost:8000

You should then see:

Great Job!

Cart review

Install Laravel Livewire