Installation

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

Install The Package

composer require livewire/livewire

Include The Assets

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

<html>
<head>
    ...
    @livewireStyles
</head>
<body>
    ...
    @livewireScripts
</body>
</html>

You can alternatively use the tag syntax.

<livewire:styles />
...
<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:

php 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:

php 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:

{
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi",
            "@php artisan vendor:publish --force --tag=livewire:assets --ansi"
        ]
    }
}

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_base_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: