Skip to main content
LiveVue Logo Vue inside Phoenix LiveView with seamless end-to-end reactivity.

​
Why LiveVue?

Phoenix LiveView makes it possible to create rich, interactive web apps without writing JavaScript. But once you 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 you to create hybrid apps, where part of the session state is on the server and part on the client.

​
Use LiveVue when:

  • Your hooks are starting to look like jQuery
  • You have complex local state to manage
  • You’d like to use the massive Vue ecosystem
  • You want transitions, graphs, and rich UI interactions
  • You simply love Vue

​
Features

End-to-end reactivity

Seamless data flow between Phoenix LiveView and Vue components with automatic synchronization

One-line install

Automated setup via Igniter installer gets you started in seconds

Server-side rendering

SSR support for Vue components with fast initial page loads and better SEO

Lazy-loading components

Load Vue components on-demand for optimal performance

Efficient props diffing

Only changed data is sent over WebSocket using JSON Patch

~VUE sigil

Alternative LiveView DSL with VS Code syntax highlighting

Phoenix Streams support

Efficient patches for list operations with stream() support

Tailwind support

Full integration with Tailwind CSS for modern styling

Slot interoperability

Use Phoenix slots seamlessly within Vue components

File upload composable

useLiveUpload() for seamless Vue integration with LiveView uploads

Form handling

useLiveForm() with server-side validation via Ecto changesets

Amazing DX

Powered by Vite for instant Hot Module Replacement

​
Quick example

Here’s how easy it is to use Vue components in LiveView: 
<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>

​
Get started

Installation

Install LiveVue in your Phoenix project with one command

Quick start

Build your first Vue component in minutes

​
Resources

LiveVue is inspired by LiveSvelte. Both projects solve the same problem with different frontend frameworks.

Build docs developers (and LLMs) love

Get started for freeTalk to us