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
<script setup lang="ts">
defineProps<{
message: string
}>()
</script>
<template>
<div class="space-y-3">
<p class="text-sm font-medium">{{ message }}</p>
<p class="text-xs text-neutral">
This component is <strong>injected</strong> into the layout's
default slot via <code class="bg-base-300 px-1 py-0.5 rounded">v-inject</code>.
</p>
<button
phx-click="change_message"
class="btn btn-sm btn-secondary"
>
Change message
</button>
</div>
</template>
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.