Phoenix Vapor

Write LiveView templates in Vue syntax, or whole LiveViews as .vue files. PhoenixVapor compiles them to the same %Phoenix.LiveView.Rendered{} structs ~H produces, so they use LiveView's diff protocol and client unchanged.

Everything runs inside the BEAM, with no Node.js. Vize compiles Vue in a Rust NIF, QuickBEAM runs the JavaScript that needs a runtime, and Volt builds PhoenixVapor's own TypeScript. Templates aren't a Vue app mounted inside a LiveView: they compile to LiveView's own %Rendered{} structs, so LiveView's change tracking and diffs apply to them unchanged.

The name comes from the shape Vue's Vapor mode and LiveView share: a template is static HTML with dynamic slots between it, and only the slots update. PhoenixVapor renders that shape on the server. In the browser, hybrid components are standard Vue 3 components on the virtual DOM, so component libraries such as Reka UI work as they are; Vapor mode itself doesn't run in the browser.

defmodule MyAppWeb.CounterLive do
  use MyAppWeb, :live_view
  use PhoenixVapor

  def mount(_params, _session, socket), do: {:ok, assign(socket, count: 0)}

  def render(assigns) do
    ~VUE"""
    <p>{{ count }}</p>
    <button @click="inc">+</button>
    """
  end

  def handle_event("inc", _, socket), do: {:noreply, update(socket, :count, &(&1 + 1))}
end

PhoenixVapor is experimental. It is pre-1.0, so minor releases may change its API, and it builds on Vize, a Vue compiler that is pre-1.0 too.

def deps do
  [{:phoenix_vapor, "~> 0.6"}]
end

Templates need nothing else. Hybrid mode and direct DOM patching need a few lines of browser setup; see Getting started.

Guides, a cheatsheet, and the API reference are on HexDocs. examples/demo is a Phoenix app using every mode.

PhoenixVapor compiles Vue templates and single-file components into LiveView, using Vize for Vue, QuickBEAM for server-side JavaScript, and Volt for its browser code.

It is part of a frontend stack that runs inside the BEAM — builds, JS runtimes, icons, and Vue-to-LiveView compilation as supervised parts of the application instead of external toolchain processes. See the Elixir Volt organization for the rest, and Building Blocks for the Future Web for the thesis, architecture, and roadmap that tie them together.

MIT