I’m extremely happy to announce that LiveVue hit 1.0 today! I’ve built a dedicated page showing all the major capabilities of the library: livevue.skalecki.dev

LiveVue is a library that allows you to seamlessly mix Phoenix LiveView and Vue.js. This post explains why this library exists, describes decisions made along the way and technical challenges I’ve had to overcome to reach 1.0. The first public commit happened on May 8, 2024. Looking back, it’s quite a long time ago.

The Problem

It was 2024 — Phoenix 1.7. I’d recently left the Python world for Elixir and was building an app with Phoenix LiveView. My app had dynamic forms with conditional sections and client-side interactions that didn’t need server round-trips. My past experience with Vue and React spoiled me with a lightweight per-component state, and I was looking for a similar experience in Phoenix.

LiveView’s tools didn’t quite fit: hooks were time-consuming to write, JS commands felt brittle, and Live Components felt heavy for simple UI state. I couldn’t find a good option for declarative client-side rendering in Phoenix.

So I went looking for a better solution. First, I stumbled upon Alpine.js. While it was easy to integrate, I felt it wasn’t exactly what I was looking for. Then, I found a wonderful library called LiveSvelte and immediately saw the potential. But I’m a longtime Vue fan — I wanted that familiar development experience in Phoenix.

If LiveSvelte could exist, I thought, why couldn’t LiveVue?