Interactive Examples

Learn by doing

Each example shows a complete, working implementation with both LiveView and Vue source code. See how props flow from server to client, and how events bubble back up.

How these examples work

Preview

Interact with the live component. State updates flow through the WebSocket.

LiveView

The Elixir code that manages state and handles events server-side.

Vue

The Vue component that receives props and provides the UI.

All Examples

Getting Started

Counter

Pass assigns as props to Vue, handle clicks in LiveView

Custom Encoder

Send Ecto schemas and custom structs as props

Events

Event Handling

Send events from Vue to your handle_event callbacks

Server Events

Push events from LiveView to Vue (like push_event)

Navigation

Use push_patch and push_navigate from Vue components

Forms

Simple Form

Use Ecto changesets for validation in Vue forms

Nested Objects

Handle embedded schemas and nested changesets

Dynamic Arrays

Add, remove, reorder items in has_many associations

Uploads

File Upload

Use allow_upload with Vue drag-and-drop UI

Real-time

Phoenix Streams

Render LiveView streams in Vue components

Connection Status

React to socket disconnects and reconnects

Advanced

Slots

Pass HEEx markup into Vue component slots

SSR Control

Skip server rendering for browser-only libraries

Vue Sigil

Write Vue components inline in your LiveView

Ready to build?

Install LiveVue and start using Vue components in your Phoenix app.

mix igniter.install live_vue

Read the docs