How to Install & Setup Livewire 3 in Laravel 11

Websolutionstuff | Jan-28-2025 | Categories : Laravel

Livewire is a powerful framework for building dynamic, reactive components in Laravel without writing any JavaScript. With Livewire 3, you get even more features and improved performance.

If you're using Laravel 11 and want to leverage Livewire 3 for creating seamless user experiences, this guide is for you. I’ll show you how to install and set up Livewire 3 step by step.

How to Install & Setup Livewire 3 in Laravel 11

Step 1: Install Laravel 11

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel example-app

Step 2: Install Laravel UI Auth Scaffolding

Next, we'll install laravel UI auth scaffold using the following command.

composer require laravel/ui

php artisan ui bootstrap --auth

npm install

npm run build

Step 3: Install Livewire 3

Next, we'll install Livewire using the following command.

composer require livewire/livewire

Step 4: Setup Livewire 3

Next, we'll open the `layouts.app` Blade file and include the `@livewireStyles` and `@livewireScripts` directives.

resources/views/layouts/app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">

    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])

    @livewireStyles

</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav me-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ms-auto">
                        <!-- Authentication Links -->
                        @guest
                            @if (Route::has('login'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                                </li>
                            @endif

                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }}
                                </a>

                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
  
@livewireScripts
 
</html>

Step 5: Create Component

Then, we'll create a component using the following command.

php artisan make:livewire Counter

app/Livewire/Counter.php
   
resources/views/livewire/counter.blade.php

app/Livewire/Counter.php

<?php

namespace App\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $counter;

    public function render()
    {
        return view('livewire.counter');
    }

    public function increment()
    {
        $this->counter++;
    }

    public function descrement()
    {
        $this->counter--;
    }
}

resources/views/livewire/counter.blade.php

<div>
    <h4>Counter: {{ $counter }}</h4>
    <button class="btn btn-success" wire:click="increament">+</button>
    <button class="btn btn-danger" wire:click="descrement">-</button>
</div>

Step 6: Use Livewire Component

We'll use a counter component on the home page. so you need to update home.blade.php file

resources/views/home.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Counter') }}</div>

                <div class="card-body">
                    <livewire:counter />
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Step 7: Run the Laravel 11 Application

Now, run the laravel 11 application using the following command.