Livewire
  • Step-by-step tutorial to install Livewire
Blog Image
  • 1 year ago
  • 3 min read

Livewire is a powerful, full-stack framework for Laravel that allows developers to build dynamic interfaces without leaving the comfort of Laravel’s backend environment. Instead of using a front-end JavaScript framework like Vue or React, Livewire simplifies the process by using Laravel's Blade templating and Livewire components to handle dynamic updates. 

Prerequisites

  1. Laravel Project: Make sure you have a Laravel project set up. If not, install Laravel by running:
  2. composer create-project --prefer-dist laravel/laravel your_project_name
  3. Composer: Ensure you have Composer installed.

Step 1: Install Livewire

In your Laravel project directory, install Livewire using Composer:

codecomposer require livewire/livewire

Step 2: Add Livewire Scripts and Styles

In your resources/views/layouts/app.blade.php (or wherever your main layout file is), add the following directives before the closing </head> and </body> tags:

In the <head> section (for Livewire styles):

@livewireStyles

Before the closing </body> tag (for Livewire scripts):

@livewireScripts

Step 3: Create a Livewire Component

To create a new Livewire component, run the following Artisan command:

php artisan make:livewire ComponentName

This will create two files:

  1. View file: resources/views/livewire/component-name.blade.php
  2. Component class: app/Http/Livewire/ComponentName.php

Step 4: Use Livewire Component

In your Blade view, you can render the Livewire component using the following syntax:

livewire:component-name />

Alternatively, you can use the Livewire directive like this:

@livewire('component-name')

Step 5: Run the Application

Now that Livewire is set up, run your Laravel application to see the component in action:

php artisan serve

Navigate to http://localhost:8000 and ensure your Livewire component works as expected.

Example: Counter Component

Here’s an example of a simple counter component using Livewire.

Step 1: Create the Component

php artisan make:livewire Counter

Step 2: Update Counter.php

In the app/Http/Livewire/Counter.php, modify the class like this:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

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

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

Step 3: Update the View

In resources/views/livewire/counter.blade.php, add the following code:

<div style="text-align: center;">
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>

Step 4: Add the Component to a Blade File

In your main resources/views/welcome.blade.php (or any Blade file you want), include the counter component:

<livewire:counter />

Step 5: Serve the Application

Run your application and visit the page to see the counter in action:

php artisan serve

That’s it! You have successfully installed and used Livewire in a Laravel project.