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

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>

If you are on Laravel 7 or higher, you can use the new 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 vendor:publish --tag=livewire:config

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".

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" setting 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: 1. 'asset_base_url' => '/assets' 2. 'asset_base_url' => '/application'

Publishing Assets

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

        1php artisan vendor:publish --tag=livewire: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}

← Previous Topic Quickstart

Next Topic → Making Components