You're browsing the documentation for an old version of Livewire. Consider upgrading your project to Livewire 3.x.

Installation

Be amazing at Livewire
with our in-depth screencasts. Watch Now

Requirements
Install The Package
Include The Assets
Publishing The Config File
Publishing Frontend Assets
Configuring The Asset Base URL

Requirements

PHP 7.2.5 or higher
Laravel 7.0 or higher

Visit the composer.json file on Github for the complete list of package requirements.

Install The Package

        1composer require livewire/livewire

Include The Assets

Add the following Blade directives in the head tag, and before the end body tag in your template.

         1<html>
 2<head>
 3    ...
 4    @livewireStyles
 5</head>
 6<body>
 7    ...
 8    @livewireScripts
 9</body>
10</html>

You can alternatively use the tag syntax.

        1<livewire:styles />
2...
3<livewire:scripts />

That's it! That's all you need to start using Livewire. Everything else on this page is optional.

Publishing The Config File

Livewire aims for "zero-configuration" out-of-the-box, but some users require more configuration options.

You can publish Livewire's config file with the following artisan command:

        1php artisan livewire:publish --config

Publishing Frontend Assets

If you prefer the JavaScript assets to be served by your web server not through Laravel, use the livewire:publish command:

        1php artisan livewire:publish --assets

To keep the assets up-to-date and avoid issues in future updates, we highly recommend adding the command to the post-autoload-dump scripts in your composer.json file:

        1{
2    "scripts": {
3        "post-autoload-dump": [
4            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
5            "@php artisan package:discover --ansi",
6            "@php artisan vendor:publish --force --tag=livewire:assets --ansi"
7        ]
8    }
9}

Configuring The Asset Base URL

By default, Livewire serves its JavaScript portion (livewire.js) from the following route in your app: /livewire/livewire.js.

The actual script tag that gets generated defaults to:
<script src="/livewire/livewire.js"></script>

There are two scenarios that will cause this default behavior to break:

You publish the Livewire assets and are now serving them from a sub-folder like "assets".
Your app is hosted on a non-root path on your domain. For example: https://your-laravel-app.com/application. In this case, the actual assets will be served from /application/livewire/livewire.js, but the generated script tag, will be trying to fetch /livewire/livewire.js.

To solve either of these issues, you can configure the "asset_url" in config/livewire.php to customize what's prepended to the src="" attribute.

For example, after publishing Livewire's config file, here are the settings that would fix the above two issues:

'asset_url' => '/assets'
'asset_url' => '/application'

← Previous Topic Upgrading From 1.x

Next Topic → Making Components