live_vue

End-to-end reactivity for Phoenix LiveView and Vue.

Package 563 stars GitHub

Vue inside Phoenix LiveView with seamless end-to-end reactivity.

Features

⚡ End-To-End Reactivity with LiveView
🧙‍♂️ One-line Install - Automated setup via Igniter installer
🔋 Server-Side Rendered (SSR) Vue
🐌 Lazy-loading Vue Components
📦 Efficient Props Diffing - Only changed data is sent over WebSocket
🪄 ~VUE Sigil as an alternative LiveView DSL with VS Code syntax highlighting
🎯 Phoenix Streams Support with efficient patches
🦄 Tailwind Support
🦥 Slot Interoperability
📁 File Upload Composable - useLiveUpload() for seamless Vue integration with LiveView uploads
📝 Comprehensive Form Handling - useLiveForm() with server-side validation via Ecto changesets
🚀 Amazing DX with Vite

Resources

Example

After installation, you can use Vue components in the same way as you'd use functional LiveView components. You can even handle Vue events with JS hooks! All the phx-click, phx-change attributes works inside Vue components as well.

<script setup lang="ts">
import {ref} from "vue"

// props are passed from LiveView
const props = defineProps<{count: number}>()

// local state
const diff = ref(1)
</script>

<template>
  Current count: {{ props.count }}
  <label>Diff: </label>
  <input v-model.number="diff" type="range" min="1" max="10" />

  <button phx-click="inc" :phx-value-diff="diff">
    Increase counter by {{ diff }}
  </button>
</template>

defmodule MyAppWeb.CounterLive do
  use MyAppWeb, :live_view

  def render(assigns) do
    ~H"""
    <.vue count={@count} v-component="Counter" />
    """
  end

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

  def handle_event("inc", %{"diff" => value}, socket) do
    {:noreply, update(socket, :count, &(&1 + value))}
  end
end

In the default ~H setup from mix live_vue.install, LiveVue component tags get v-socket injected automatically.

Why?

Phoenix Live View makes it possible to create rich, interactive web apps without writing JS.

But once you'll need to do anything even slightly complex on the client-side, you'll end up writing lots of imperative, hard-to-maintain hooks.

LiveVue allows to create hybrid apps, where part of the session state is on the server and part on the client.

Reasons why you'd like to use LiveVue

Your hooks are starting to look like jQuery
You have a complex local state
You'd like to use a massive Vue ecosystem
You want transitions, graphs etc.
You simply like Vue 😉

Installation

New project:

mix archive.install hex igniter_new
mix igniter.new my_app --with phx.new --install live_vue

Existing project (Phoenix 1.8+ only):

mix igniter.install live_vue

Igniter installer works only for Phoenix 1.8+ projects. For detailed installation instructions, see the Installation Guide.

VS Code Extension

For syntax highlighting of the ~VUE sigil:

VS Code Marketplace: Install LiveVue extension
Manual Installation: Download VSIX from releases and install via Extensions > Install from VSIX...

Guides

Getting Started

Getting Started - Create your first Vue component with transitions

Core Usage

Basic Usage - Fundamental patterns, ~VUE sigil, and common examples
Forms and Validation - Complex forms with server-side validation using useLiveForm
Configuration - Advanced setup, SSR, and customization options

Reference

Component Reference - Complete syntax documentation
Client-Side API - Vue composables and utilities

Advanced Topics

Architecture - How LiveVue works under the hood
Persistent Layouts - Keep layout Vue apps or global layout props alive across navigation
Testing - Testing Vue components in LiveView
Deployment - Production deployment guide

Help & Troubleshooting

FAQ - Common questions and comparisons
Troubleshooting - Debug common issues
Comparison - LiveVue vs other solutions

Relation to LiveSvelte

This project is heavily inspired by ✨ LiveSvelte ✨. Both projects try to solve the same problem. LiveVue was started as a fork of LiveSvelte with adjusted ESbuild settings, and evolved to use Vite and a slightly different syntax. I strongly believe more options are always better, and since I love Vue and it's ecosystem I've decided to give it a go 😉

You can read more about differences between Vue and Svelte in FAQ or in comparison guide.

LiveVue Development

Local Setup

Ensure you have Node.js installed. Clone the repo and run mix setup.

No build step is required for the library itself - Vite handles TypeScript transpilation when consumers bundle their app.

Use npm run e2e:test to run the Playwright E2E tests.

Testing Local Changes in Another Project

To test local LiveVue changes in a separate Phoenix project, use a path dependency in your project's mix.exs:

{:live_vue, path: "../live_vue"}

Then run mix deps.get && npm install. The installer already configures package.json to use file:./deps/live_vue, so both Elixir and npm will point to your local copy.

Elixir changes are reflected immediately. For TypeScript changes, run npm install again to pick them up.

Releasing

Release is done with easy_publish.

Update CHANGELOG.md
Check the version in mix.exs
Check the version in package.json

Run

# to ensure everything works fine
mix release.minor --dry-run

# to publish
mix release.minor

Features Implemented 🎯

useLiveEvent - automatically attaching & detaching handleEvent
JSON Patch diffing - send only changed props over the WebSocket
VS Code extension - syntax highlighting for ~VUE sigil
Igniter installer - one-line installation for Phoenix 1.8+ projects
useEventReply - easy handling of {:reply, data, socket} responses
useLiveForm - Ecto changesets & server-side validation
Phoenix Streams - full support for stream() operations
useLiveUpload - LiveView file uploads from Vue components
v-inject - Vue components inside Vue slots across LiveView navigation
Headless LiveVue components - shared reactive props without visible UI
QuickBEAM SSR - embedded production SSR without Node.js at runtime

Credits

LiveSvelte

Star History

Back to Elixir