Alpine.js not working in LiveWire setup

What seems to be the problem:
As the documentation suggests, alpine.js should work out of the box with the latest version of LW.
I had to add the cdn-hosted script for alpine.js to make it work

Steps to Reproduce:

  • Create a new Laravel app
  • install LiveWire
  • use Alpin.js

Are you using the latest version of Livewire: Yes

Here’s the repo with the issue

If you happen to have the code up on github/gitlab it would be easier to troubleshoot. That said, assuming there isn’t any issue with how you have the CDN included in the head of your layout template, it might just be an issue with how you are using Alpine. Do you have a code snippet that can show the issue you are having?

Looks like the CDN import is commented out here so you should be able to uncomment that and be good to go! :metal:

Edit: put the wrong link…

That’s just to prove that alpine doesn’t work with livewire installation.
Because as per the documentation

Livewire supports Alpine out of the box and works pretty hard to make the combination as smooth as possible.

https://laravel-livewire.com/docs/alpine-js#alpine-in-livewire

Also

IMPORTANT: This repo is no longer needed. Livewire > 1.0 now supports Alpine out of the box.

https://github.com/livewire/alpine-plugin

Which means I don’t have to install alpine via npm or cdn separately when I’m using livewire, to use alpine

I see, I misunderstood. I think that is just an oversight in the documentation, Livewire does not include the Alpine.js installation with it, you have to install Alpine.js yourself.

What the docs are trying to convey here is that Livewire is designed with Alpine.js in mind so they don’t step on each others toes when modifying the DOM, which may not be the case if you use a different front-end framework (no promises are made there).

1 Like

Oh, if that’s the case then I think the docs should be more clear.