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


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.

3 ...
4 @livewireStyles
7 ...
8 @livewireScripts

If you are on Laravel 7 or higher, you can use the new tag syntax.

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

  1. You publish the Livewire assets and are now serving them from a sub-folder like "assets".

  2. Your app is hosted on a non-root path on your domain. For example: 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:

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 }
← Previous Topic Quickstart
Next Topic → Making Components