LiveVue
1.1
v-inject
v1.1Inject a Vue component into another component's slot — even when they're rendered by different LiveViews. The layout component persists while only the page content changes.
What this example shows
Hello from the injected page!
This component is injected into the layout's default slot via v-inject.
How it works
1 Render a layout component with an id
The layout component is rendered with a unique id.
It defines a
<slot />
where page content will be injected.
In a real app, this would typically live in
root.html.heex
or a sticky LiveView.
<.vue id="app-layout" v-component="AppLayout" v-socket={@socket} title="My App" />2 Inject a page into the layout's slot
The page component uses
v-inject="app-layout"
to target the layout by its id. The page is rendered inside the layout's default slot
instead of inline.
<.vue v-component="Page" v-inject="app-layout" v-socket={@socket} message={@message} />3 Layout and page update independently
Toggle the theme — only the layout re-renders. Change the message — only the page updates. In a real app with a sticky LiveView layout, the layout Vue component persists across LiveView navigation while pages swap in and out of the slot.