LiveVue (LiveVue v0.7.3)

LiveVue provides seamless integration between Phoenix LiveView and Vue.js components.

Installation and Configuration

See README.md for installation instructions and usage.

Component Options

When using the vue/1 component or ~V sigil, the following options are supported:

Required Attributes

v-component (string) - Name of the Vue component (e.g., "YourComponent", "directory/Example")

Tip

Value of v-component will be directly passed to resolve function of the createLiveVue instance. It should return Vue component or a promise that resolves to a Vue component. In a standard setup, you can find it 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 (LiveView.Socket) - LiveView socket, should be provided when rendering inside LiveView

Event Handlers

v-on:* - Vue event handlers can be attached using the v-on: prefix (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

Summary

Functions

sigil_VUE(term, modifiers)

Inlines a Vue single-file component inside a LiveView. This is the new recommended way over the ~V sigil.

vue(assigns)

Renders a Vue component within Phoenix LiveView.

Functions

sigil_VUE(term, modifiers)

(macro)

Inlines a Vue single-file component inside a LiveView. This is the new recommended way over the ~V sigil.

vue(assigns)

Renders a Vue component within Phoenix LiveView.

Examples

<.vue
  v-component="MyComponent"
  message="Hello"
  v-on:click="handleClick"
  class="my-component"
/>

<.vue
  v-component="nested/Component"
  v-ssr={false}
  items={@items}
>
  <:default>Default slot content</:default>
  <:named>Named slot content</:named>
</.vue>