How to Manually Bundle Alpine Into a Livewire Project
If you want to add your own Alpine components and plugins to a Livewire Project, you'll have to manually add Livewire and Alpine to take control.
When you install Livewire, this automatically loads Livewire and Alpine for you. Super convenient, but if you need more control over how Alpine is configured, here's what you need to do.
Use @livewireScriptConfig
Begin by adding the @livewireScriptConfig directive to your layout file as follows:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- Other stuff -->
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<!-- Body stuff -->
@livewireScriptConfig
</body>
</html>
This directive sets a global window.livewireScriptConfig object with configuration values for Livewire. You don't need to know exactly what happens behind the scenes here.
Import Livewire and Alpine manually
Next up, head to app.js (or your main JavaScript file) and import Alpine and Livewire:
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm'
Then, and really importantly, manually start Livewire:
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm'
Livewire.start()
You don't need to manually start Alpine since it'll automatically use the Alpine instance — we import it here purely to override/add anything we need.
And there we go! You can now register directives, create plugins, or anything else you need to configure. You'd do that just here:
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm'
// Do whatever you need with Alpine here (e.g. Alpine.plugin(...))
Livewire.start()
So, if you're working with Livewire and need to access Alpine — that's how!
