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

• ⚡ 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
• 🎯 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

• HexDocs
• HexPackage
• Phoenix LiveView

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" v-socket={@socket} />
    """
  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

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.

• 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 😉

New project:

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

Existing project:

mix igniter.install live_vue

For detailed installation instructions, see the Installation Guide.

• Getting Started - Create your first Vue component with transitions

• 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

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

• Architecture - How LiveVue works under the hood
• Testing - Testing Vue components in LiveView
• Deployment - Production deployment guide

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

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.

Ensure you have node installed. Clone the repo and run mix setup. You can then run mix assets.watch to start a watcher for the assets.

You can use /example_project as a way to test live_vue locally.

• Clone this repo
• Go to example_project dir
• Run mix setup
• Run mix phx.server to start the server
• Open http://localhost:4000 in your browser

LiveVue is written in TypeScript. To see the changes you made, you have to recompile the assets. You can do it with:

mix assets.build

Or run the watcher:

mix assets.watch

Release is done with expublish package.

• Write version changelog in untracked RELEASE.md file
• Update version in INSTALLATION.md

Run

git add INSTALLATION.md
git commit -m "INSTALLATION version bump"

# to ensure everything works fine
mix expublish.minor --dry-run --allow-untracked --branch=main

# to publish everything
mix do assets.build, expublish.minor --allow-untracked --branch=main

• useLiveEvent - an utility automatically attaching & detaching handleEvent
• optimize payload - send only json_patch diffs of updated props ✅ Done!
• shared props automatically included in all components
• VS code extension highlighting ~VUE sigil
• try to use Igniter as a way of installing LiveVue in a project ✅ Done!
• useEventReply - an utility similar to useFetch making it easy to get data from &handle_event/3 -> {:reply, data, socket} responses
• useLiveForm - an utility to effortlessly use Ecto changesets & server-side validation, similar to HEEX ✅ Done!
• Phoenix Streams - Full support for stream() operations with transparent patches ✅ Done!

LiveSvelte