Install & Setup Laravel Livewire 3 | EP 1

By Hardik Savani December 22, 2024 Category : Laravel Laravel Livewire

In this post, I will show you how to install and setup laravel liveiwre 3. we will getting started with counter example with livewire.

Laravel Livewire is a powerful, full-stack framework for building dynamic, interactive web applications using PHP without needing JavaScript. It allows developers to create reactive components, manage state, and update the DOM seamlessly. Livewire integrates deeply with Laravel, leveraging features like routing, validation, and Eloquent. Its simplicity, real-time updates, and easy-to-use syntax make it ideal for building modern, responsive user interfaces directly in Laravel, enhancing productivity and developer experience.

Here, i will show you how to install and setup it and also we will create simple counter example using laravel livewire.

Step 1: Install Laravel 11

First of all, we need to get a fresh Laravel 11 version application using the command below because we are starting from scratch. So, open your terminal or command prompt and run the command below:

composer create-project laravel/laravel example-app

Step 2: Install Laravel UI Auth Scaffolding

Now, in this step, we will create an auth scaffold command to generate login, register, and dashboard functionalities. So, run the following commands:

Laravel 11 UI Package:

composer require laravel/ui

Generate Auth:

php artisan ui bootstrap --auth 

npm install

npm run build

Read Also: Laravel Livewire File Upload Tutorial

Step 3: Install Livewire 3

Now in this step, we will simply install Livewire to our Laravel application using the below command:

composer require livewire/livewire

Step 4: Setup Livewire 3

Here, we'll open the `layouts.app` Blade file and include the `@livewireStyles` and `@livewireScripts` directives. Let's add them as shown below.

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 First Component

Now here we will create a Livewire component using their command. So run the following command to create an add more component.

php artisan make:livewire Counter

Now they created files on both paths:

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

Now, both files we will update as below for our contact us form.

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

now, we will user counter component in home page. so you need to update home.blade.php file as the following way:

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

Run Laravel:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

Read Also: Laravel 11 Livewire Wizard Multi Step Form Tutorial
http://localhost:8000/

Now, you need to register user and go to dashboard:

Output:

I hope it can help you...

Tags :
Previous

Laravel Passport - "Invalid key supplied" Error Solution

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares