Installation
with our in-depth screencasts. Watch Now
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
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:
'asset_base_url' => '/assets'
'asset_base_url' => '/application'