livewire/livewire: Bump Alpine to 3.16.2
Contributed by calebporzio
Part of the livewire v4.4.7 release
Livewire 4 now bundles Alpine.js 3.16.2. Pull request #10546 raises the version constraints for the Alpine core and all ten Alpine plugins that Livewire ships — from ^3.16.1 to ^3.16.2 — and refreshes the lockfile accordingly. On the surface this is a routine patch bump, but the diff also contains one genuinely structural improvement: Alpine's internal dependency on Vue's reactivity package moved from the ancient 3.1.x line to the modern 3.5.x line, collapsing duplicate packages out of the bundle. The change was validated with the full JavaScript test suite (109 passed, 1 skipped), a production asset build, and a green GitHub Actions matrix. If you're upgrading from Livewire v3.8.10, here's what to expect.
What changed
The package.json manifest now requires alpinejs@^3.16.2 plus matching ^3.16.2 constraints for every bundled plugin: @alpinejs/anchor, @alpinejs/collapse, @alpinejs/csp, @alpinejs/focus, @alpinejs/intersect, @alpinejs/mask, @alpinejs/morph, @alpinejs/persist, @alpinejs/resize, and @alpinejs/sort. All lockfile entries, integrity hashes, and resolved tarball URLs were regenerated against the npm registry, confirming every package resolves cleanly at 3.16.2.
The quieter but more interesting part of the diff is the Vue reactivity situation. Previously, both alpinejs and @alpinejs/csp declared @vue/reactivity: ~3.1.1, which forced npm to nest private copies of @vue/[email protected] and @vue/[email protected] underneath each of them — even though Livewire itself already depended on @vue/reactivity ^3.2.45 (resolving to 3.5.x). With Alpine 3.16.2, those constraints became ~3.5.40, resolving to @vue/[email protected] at the top level. The four nested duplicate entries disappeared from the lockfile entirely.
Why it matters
Three reasons this bump is more than housekeeping:
- Bug fixes from upstream. 3.16.2 is a patch release on top of 3.16.1, carrying Alpine's accumulated corrections to core directives and plugins. Livewire's
morphintegration,x-modelhandling on$wirebindings, and entanglement behavior all ride on this Alpine core. - A slimmer bundle. With one shared
@vue/reactivityinstead of two nested 3.1.5 copies, the compiled production bundle ships less duplicated code. - Internal consistency. Livewire's own reactivity usage and Alpine's now run on the same modern 3.5.x engine rather than a mix of a 3.1.x-era engine and a 3.5.x engine.
What this means if you're upgrading from v3.8.10
This bump is part of the 3.x → 4.x release-prep work, so it arrives whenever you move from 3.8.10 onto the 4.x line. For the vast majority of apps, the answer is simple: nothing to do. Livewire bundles and serves Alpine itself, so the moment your application loads Livewire's JavaScript, you're on 3.16.2. Your components keep working exactly as before:
<div x-data="{ open: $wire.entangle('showPanel') }">
<button x-on:click="open = ! open">Toggle</button>
<div x-show="open" x-collapse>…</div>
</div>
If you want to confirm which version you're running after upgrading, it's one line in the browser console:
Alpine.version // "3.16.2"
If you don't use Livewire's bundled Alpine — for example, you build your own JS bundle and install Alpine via npm — align your own constraint so your version doesn't drift from the one Livewire's plugins expect:
npm install alpinejs@^3.16.2
Upgrade impact and edge cases to watch
Because this is a patch-level bump validated by the full test matrix and a passing production build, no breaking API changes are expected — no template, component, or plugin-registration changes are required. A few situations deserve a quick check:
- Self-managed plugin installs. If you install individual plugins like
@alpinejs/cspor@alpinejs/focusthrough npm, update them to^3.16.2together withalpinejsitself so core and plugin versions don't diverge. - Your own
@vue/reactivitypin. Alpine 3.16.2 wants@vue/reactivity ~3.5.40(3.5.41 resolved in testing). If your build pins that package to something older, you may reintroduce a duplicate copy of the reactivity engine that this PR just removed. - Double-loading Alpine. This remains true as always: register your custom Alpine plugins before Livewire boots, and don't pull in a second copy of Alpine alongside Livewire's bundle.
Takeaways
- Livewire 4 bundles Alpine 3.16.2 (up from 3.16.1), covering the core and all ten bundled plugins.
- Alpine's Vue reactivity dependency jumped from 3.1.x to 3.5.x, eliminating duplicated nested packages and slimming the bundle.
- If you rely on Livewire's Alpine, upgrading from v3.8.10 to 4.x picks this up automatically — no code changes needed.
- If you self-host Alpine via npm, bump to
alpinejs@^3.16.2and keep plugin versions in lockstep. - Validation was thorough: 109 JavaScript tests passed (1 skipped), the production build succeeded, and the full CI matrix was green.