Looking for input about how to better approch JS development in Phoenix (not just liveview)

Hello :waving_hand: I wanted to add my 2 cents here, as I had similar “problems” with LiveView and currently I’m quite satisfied with my workflow. For context, I’m the creator of LiveVue library, and I have quite a deep familiarity and preference for Vue frontend framework. I gave a talk “Why mixing LiveView and a frontend framework is a great idea” during ElixirConfEU 2025, recording is not yet out but you can check slides here (desktop-optimized)

So, in short:

  • I love declarative approach of LiveView, and having a stateful connection to the server which allows to skip writing API endpoints
  • I don’t like JS interop - JS module is limiting and imperative, hooks are detached and imperative as well.
  • LiveComponents are nice but have awkward API for updates, and can’t handle handle_info etc. Also doesn’t solve client side state.

What I want:

  • Be able to decide where to keep state - on server, or on client?
  • Have declarative rendering on both sides
  • Use amazing features of LiveView without problems

My current approach:

  • Use LiveVue in the same way as Interia.js does - one top-level Vue component per LiveView
  • Ditch HEEX, render whole HTML in Vue.
  • LiveView is responsible for updating props which are transparently propagated to the frontend.
  • Vue can decide if given user action should be handled locally or propagated to the server
  • I’m colocating Elixir files and Vue files.
  • live-navigate is fast, since it only updates props of a Vue component. Update is synchronous, no flash of unstyled content.
  • SSR is available and quite fast.
  • Using Vite instead of ESbuild (amazing DX)

Using that approach is not yet as straightforward as I’d like, I’m improving library to make it so (eg colocating requires moving node_modules to root etc). Igniter installer is also coming. Not sure if it checks all your boxes, but wanted to highlight there’s a possibility to do something like this without using Inertia :wink:

Some screenshots from my current project.



10 Likes