LiveVue (LiveVue v0.6.1)

View Source

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

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

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>