• Hello, Visitor
  • Monday, June 24, 2024
Search Result
Home » Laravel » Livewire » Laravel Livewire Installation & Layout Setup

Laravel Livewire Installation & Layout Setup

Hello friends, today in this blog you’ll learn how to  install laravel livewire and setup livewire layout for livewire components.

Laravel Livewire is a library that makes it simple to build modern, reactive, dynamic interfaces using Laravel Blade as your templating language. This is a great stack to choose if you want to build an application that is dynamic and reactive but don't feel comfortable jumping into a full JavaScript framework like Vue.

Now, lets see how we can   install laravel livewire and setup livewire layout for livewire components.

You can also check our video tutorial about how to  install laravel livewire and setup livewire layout for livewire components.

Video Tutorial of  laravel livewire installation




Step 01

Install laravel with the following commands


composer create-project --prefer-dist laravel/laravel <your_app_name>

or,

laravel new <your_app_name>


Step 02

It will take some time to install. After that install livewire using composer. Go to your project folder and run following command

composer require livewire/livewire


Step 03

Cearte base layout file with this command

php artisan make:livewire layouts/base


This will make two file one is in App/Http/livewire/layouts directory named base.php and another is in resources/views/livewire/layouts directory named base.blade.php

Now, go to base.blade.php file and use 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>NzCoding - Laravel</title>

    @livewireStyles
</head>
<body>
   
    {{ $slot }}

    @livewireScripts
</body>
</html>


Step 04

Now create another livewire component with following command

php artisan make:livewire IndexComponent

This will also make two file one is in App/Http/livewire directory named IndexComponent.php and another is in resources/views/livewire directory named index-component.blade.php

Now, go to index-component.blade.php file and use the following code,

<div>
    <div class="container text-center">
        <h1>Index Component</h1>
    </div>
</div>

and go to IndexComponent.php file and use the bellow code,

<?php
namespace App\Http\Livewire;
use Livewire\Component;
class IndexComponent extends Component
{
    public function render()
    {
        return view('livewire.crud.index-component')->layout('livewire.layouts.base');
    }
}


Step 05

Now make a route to check that the installation is successfull or not,

go to, routes/web.php and use this code

Route::get('index', IndexComponent::class)->name('index');


Step 06

Now run the project with this command,

php artisan serve


after that open your browser and go to

http://127.0.0.1:8000/index


and if you can see output like the following image than you are successfully install livewire and setup livewire layout in laravel application.  


Leave a Reply

You must Login to add a comment