Livewire is a Laravel package, so you will need to have a Laravel application up and running before you can install and use Livewire. If you need help setting up a new Laravel application, please see the official Laravel documentation.
Before installing Livewire, make sure you have:
To install Livewire, open your terminal and navigate to your Laravel application directory, then run the following command:
composer require livewire/livewireThat's it! Livewire uses Laravel's package auto-discovery, so no additional setup is required.
Ready to build your first component? Head over to the Quickstart guide to create your first Livewire component in minutes.
When using Livewire components as full pages, you'll need a layout file. You can generate one using the Livewire command:
php artisan livewire:layoutThis creates a layout file at resources/views/layouts/app.blade.php with the following contents:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? config('app.name') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
</head>
<body>
{{ $slot }}
@livewireScripts
</body>
</html>The @livewireStyles and @livewireScripts directives include the necessary JavaScript and CSS assets for Livewire to function. Livewire bundles Alpine.js with its JavaScript, so both are loaded together.
[!info] Asset injection is automatic Even without these directives, Livewire will automatically inject its assets into pages that contain Livewire components. However, including the directives gives you explicit control over where the assets are placed, which can be helpful for performance optimization or compatibility with other packages.
Livewire is "zero-config", meaning you can use it by following conventions without any additional configuration. However, if needed, you can publish and customize Livewire's configuration file:
php artisan livewire:configThis will create a new livewire.php file in your Laravel application's config directory where you can customize various Livewire settings.
Symptom: Livewire's JavaScript file returns a 404 error, or Livewire features don't work.
Livewire serves its JavaScript from a hash-based endpoint like /livewire-{hash}/livewire.js, where {hash} is derived from your application's APP_KEY. This unique path varies per installation.
Common causes:
Nginx configuration blocking the route: If you're using Nginx with a custom configuration, it may be blocking Laravel's dynamic Livewire routes. You can either:
/livewire-*/ to Laravel (e.g., location ~ ^/livewire-[a-f0-9]+/ { try_files $uri $uri/ /index.php?$query_string; })Route caching: If you've run php artisan route:cache, Laravel may not recognize Livewire's routes. Clear the cache:
php artisan route:clearMissing @livewireScripts: If you've disabled automatic asset injection, ensure @livewireScripts is in your layout file before </body>.
Symptom: You want to use Alpine.js on a page that doesn't have any Livewire components.
Solution: Since Alpine is bundled with Livewire, you need to include @livewireScripts even on pages without Livewire components:
<!DOCTYPE html>
<html>
<head>
@livewireStyles
</head>
<body>
<!-- No Livewire components, but we want Alpine -->
<div x-data="{ open: false }">
<button @click="open = !open">Toggle</button>
</div>
@livewireScripts
</body>
</html>Alternatively, manually bundle Livewire and Alpine and import Alpine in your JavaScript.
Check the following:
@livewireStyles is in the <head> of your layout@livewireScripts is before </body> in your layoutphp artisan cache:clearIf issues persist, check the troubleshooting documentation for more detailed debugging steps.