Installation

Livewire has both a PHP component AND a Javascript component. You need to make sure both are available in your project before you can use it.

Install the package

composer require livewire/livewire

Include the JavaScript

Add the following Blade directive somewhere in the head tag in your template.

<head>
    ...
    @livewireAssets
</head>
<body>
    ...
</body>
</html>

Livewire will load its JavaScript assets from the relative root. For example, here's the <script> tag that will be generated by default:

<script src="/livewire/livewire.js?id=123456789" defer></script>

If your app's root isn't the domain root, for example http://yourapp.com/admin, the Livewire assets won't load because they would need the following script tag url:

<script src="http://yourapp.com/admin/livewire/livewire.js?id=123456789" defer></script>

To fix this, you can optionally pass in a asset_url option to the @livewireAssets directive like so:

@livewireAssets(['asset_url' => 'http://yourapp.com/admin']);

Publishing assets

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

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

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

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 vendor:publish --tag=livewire:config

Here are the configurable options contained in this config file:

Config Name Default Value Description
class_namespace 'App\\Http\\Livewire' The folder to look for Livewire classes.
view_path resource_path('views/livewire') The folder to look for Livewire component views.
asset_url null The url to load the Livewire JavaScript assets from.
middleware_group 'web' The middleware group that is applied every time a Livewire component is updated.
← Previous Topic

The Livewire Developer

Next Topic →

Making Components