Write LiveView templates in Vue syntax, or whole LiveViews as .vue files. PhoenixVapor compiles them, through the intermediate representation of Vue's Vapor mode, 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.
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| Mode | Use | Client JavaScript |
|---|---|---|
~VUE templates |
Vue syntax in any LiveView or component | none |
Server-only .vue |
A .vue file as the LiveView's template |
none |
| Reactive | ref(), computed(), and handlers run on the server in QuickBEAM |
none |
| Hybrid | The server owns the data, Vue in the browser owns UI state | Vue 3 |
| Full runtime | Vue component libraries such as Reka UI rendered on the server | none |
PhoenixVapor is experimental. It is pre-1.0, so minor releases may change its API, and it builds on Vue's Vapor mode compiler, which is part of Vue 3.6, still a release candidate.
def deps do
[{:phoenix_vapor, "~> 0.4"}]
endTemplates 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