How to Install Laravel Livewire

Laravel Livewire is a powerful library that allows you to build dynamic, reactive web applications using Laravel and Blade templates without writing any JavaScript code. It simplifies the process of creating real-time features by handling the AJAX interactions under the hood. In this step-by-step guide, we'll walk you through the process of installing Laravel Livewire in your Laravel project.

Step 1: Create a New Laravel Project

First, make sure you have Laravel installed on your system. If not, you can install it using Composer:

composer global require laravel/installer

Now, create a new Laravel project:

laravel new my-livewire-app

Step 2: Install Livewire Package

Once your Laravel project is set up, navigate to the project directory:

cd my-livewire-app

Now, use Composer to install the Livewire package:

composer require livewire/livewire

Step 3: Set Up Livewire Configuration

After installing the package, you need to publish the Livewire configuration file:

php artisan livewire:publish --config

Step 4: Set Up Livewire JavaScript Assets (Optional)

By default, Livewire uses Alpine.js for its JavaScript interactions. If you want to customize the JavaScript assets, you can publish them using:

php artisan livewire:publish --assets

Step 5: Include Livewire CSS (Optional)

Livewire comes with some default CSS styles that you can include in your project. To publish the CSS file, run:

php artisan livewire:publish --styles

Step 6: Start Using Livewire Components

With Livewire installed and configured, you can start building Livewire components. These components are PHP classes that extend the `Livewire\Component` class. You can place them in the `app/Http/Livewire` directory.

Here's a simple example of a Livewire component that displays a counter:

// app/Http/Livewire/Counter.php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component


    public $count = 0;

    public function increment()




    public function render()


        return view('livewire.counter');



<!-- resources/views/livewire/counter.blade.php -->


    <h1>{{ $count }}</h1>

    <button wire:click="increment">Increment</button>


Step 7: Include Livewire Component in Blade Template

To include the Livewire component in your Blade template, add the following code:

<!-- resources/views/welcome.blade.php -->

<!DOCTYPE html>



    <title>Laravel Livewire</title>




    <livewire:counter />




Step 8: Run the Application

Now, you're all set! You can run your Laravel application using the built-in development server:

php artisan serve

Visit `http://localhost:8000` in your web browser, and you should see the Livewire component in action.

Congratulations! You have successfully installed Laravel Livewire and created your first Livewire component. You can now start building powerful, interactive web applications with ease. Enjoy exploring the capabilities of Livewire and take advantage of its simplicity and efficiency in creating real-time features for your Laravel projects. Happy coding!