anuaralfetahe
Phoenix LiveView compatibility with Alpine.js
Hello, I’m planning to create a Phoenix Liveview application. I need some guidance on the JS side.
I’ve researched the topic and concluded that Alpine.js may be the way to go for me. I have experience with Vue and Angular, but this time I prefer something lightweight that works well with LiveView.
Lately, I’ve started to have some doubts. My main concerns are:
- compatibility issues where HTML updates on LiveView components break the Alpine.js virtual DOM
- mixing data and code and bloating the HTML
Could anybody share their experience with LiveView + Alpine.js or recommend any other combination instead?
Thanks 
Most Liked
cmo
I used to use it but I much prefer to use Phoenix.LiveView.JS commands and LiveVIew Hooks these days. I don’t find Alpine to be worth the hassle of having to deal with the compatability with LiveView or the additionaly bundle size.
slouchpie
markevans
For many apps with LiveView probably don’t need a “JS-side” as such (the JS module can do some basic stuff).
When LiveView doesn’t cut it and you do need JS, personally I’d recommend rendering frontend JS components here and there (most frameworks allow you to sprinkle components here and there on the page - the whole page doesn’t need to be an SPA).
My go-to would be Svelte - for that you could use LiveSvelte or you could use a library I recently published Komodo
Last Post!
anuaralfetahe
Thank you all for the replies.
I will check out those leads as well before making the decision.
Solid.js seems viable option too right now.
Popular in Discussions
Other popular topics
Latest Phoenix Threads
Chat & Discussions>Discussions
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"