Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I have had some various levels of success pulling in alpine. the link that is present in both the alpine site, and the Laravel-livewire site both point to this:
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
however, this is the only link that appears to work for me:
src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"
defer
></script>
I am reading about the command line install, for a more robust approach we need to install via npm, and bundle it, like this:
window.Alpine = Alpine
Alpine.start()
Where can I find an example of how, and where, to put this bundle call. is this happening on each layout (app and guest) or is there a global spot that handles both layouts I should be using?
Install using NPM npm install alpinejs
Then in your resources/js/app.js you can do something like:
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
Now, when you build your app.js file, laravel will mix this in - npm run dev
Now include it in your file using <script src="{{ asset('js/app.js') }}" defer></script>
Hope that helps!
@Danieloplata thank you! it turns out that the bundle was already in that file, and potentially I was loading it twice....
And with vite instead of mix, you only need a few changes
In blade add @vite('resources/js/app.js), and run npm run build
@Sinnbeck thank you! I did run that!
@Sinnbeck I have figured out everything is fine with alpine and vite, but in fact upgrading did break my code and that my javascript code is breaking at this line:
x-init="init($el); $watch('activeMedia', value => scroll());"
this is due to the fact that vs3 changed the x-init function. from the upgrade page for alpinejs.dev
<!-- 🚫 Before -->
<div x-data x-init="() => { ... }">...</div>
<!-- ✅ After -->
<div x-data x-init="$nextTick(() => { ... })">...</div>
I am still trying to figure this out, going to have to change how things are initialized. but at least I know its not a vite issue now...
I wish I could give both answer to both of these responses, because they both helped me equally. Choosing Sinnbeck, because I do need to use the build command, and not the dev. A big thank you to both of you, who helped cement my understanding of how this works.
well, a lot of things have stopped working again. it seems like I do not have the grasp of vite that I thought I did. still getting the hang of this. the alpine simply fails, does not load the graphical assets, and the code stops working as well. The console is showing me a more robust error. the readonly part is what I think is breaking this.. the app file is, of course - referencing the build asset made by vite when I ran npm run build.
my manifest in the public looks like this:
{
"resources/js/app.js": {
"file": "assets/app.ab93cf8a.js",
"src": "resources/js/app.js",
"isEntry": true
},
"resources/css/app.css": {
"file": "assets/app.ce5ec99c.css",
"src": "resources/css/app.css",
"isEntry": true
}
}
and the console shows this
[Error] TypeError: Attempted to assign to readonly property.
set (app.ab93cf8a.js:28:96508)
init (1976-sony-avc-1420-video-camera-4554:3364)
(anonymous function) (app.ab93cf8a.js:32:98336)
vn (app.ab93cf8a.js:32:98047)
(anonymous function) (app.ab93cf8a.js:32:127419)
(anonymous function)
i (app.ab93cf8a.js:32:99853)
s (app.ab93cf8a.js:32:99884)
dw (app.ab93cf8a.js:32:99894)
Mt (app.ab93cf8a.js:32:102651)
(anonymous function) (app.ab93cf8a.js:32:102169)
forEach
xw (app.ab93cf8a.js:32:102162)
Module Code (app.ab93cf8a.js:32:132128)
evaluate
moduleEvaluation
[Error] ReferenceError: Can't find variable: activeAccordions
(anonymous function) (app.ab93cf8a.js:32:166)
> Selected Element
Please or to participate in this conversation.