LiveVue (LiveVue v0.6.0)
View SourceLiveVue 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 thev-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
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.
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>