Skip to main content
The LiveVue module provides seamless integration between Phoenix LiveView and Vue.js components. It exposes the vue/1 component and the ~VUE sigil for rendering Vue components within LiveView templates.

​
Usage

To use LiveVue in your module: 
use LiveVue
This imports the vue/1 component and ~VUE sigil into your module.

​
vue/1

Renders a Vue component within Phoenix LiveView. 
vue(assigns)
​
assigns
map
required
The component assigns map containing attributes and options

​
Required attributes

​
v-component
string
required
Name of the Vue component (e.g., “YourComponent”, “directory/Example”). The value is directly passed to the resolve function of the createLiveVue instance (typically found in assets/vue/index.js).

​
Optional attributes

​
id
string
Explicit ID of the wrapper component. If not provided, a random one will be generated. Useful to keep ID consistent in development (e.g., “vue-1”).
​
class
string
CSS class(es) to apply to the Vue component wrapper (e.g., “my-class” or “my-class another-class”).
​
v-ssr
boolean
Whether to render the component on the server. Defaults to the value set in config (default: true).
​
v-socket
Phoenix.LiveView.Socket
LiveView socket, should be provided when rendering inside LiveView.
​
v-diff
boolean
Whether to use differential prop updates. Defaults to the value set in config (default: true).

​
Event handlers

Vue event handlers can be attached using the v-on: prefix:
​
v-on:*
any
Event handler for Vue events (e.g., v-on:click, v-on:input).

​
Props and slots

All other attributes are passed as props to the Vue component. Slots can be passed as regular Phoenix slots.

​
Examples

Basic component with props and event handler: 
<.vue
  v-component="MyComponent"
  message="Hello"
  v-on:click="handleClick"
  class="my-component"
/>
Component with slots and SSR disabled: 
<.vue
  v-component="nested/Component"
  v-ssr={false}
  items={@items}
>
  <:default>Default slot content</:default>
  <:named>Named slot content</:named>
</.vue>

​
~VUE sigil

Inlines a Vue single-file component inside a LiveView. This is the recommended way to write inline Vue components. 
sigil_VUE(term, modifiers)
​
term
binary
required
The Vue single-file component source code as a string.
​
modifiers
list
required
Sigil modifiers (currently must be an empty list).
​
return
HEEx template
Returns a HEEx template that renders the inlined Vue component.

​
Example

~VUE"""
<template>
  <div>{{ count }}</div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
"""
The sigil automatically:
  • Writes the component to ./assets/vue/_build/#{caller.module}.vue
  • Passes all assigns as props to the component
  • Handles socket and SSR options from vue_opts in assigns

​
Deprecated

​
~V sigil

The ~V sigil is deprecated. Please use ~VUE instead.
sigil_V(term, modifiers)
This sigil has been replaced by ~VUE and will be removed in a future version.

Build docs developers (and LLMs) love

Get started for freeTalk to us