LiveVue
1.0
Slots
Pass HEEx content into Vue components using slots. Combine the power of server-rendered templates with Vue's component composition.
What this example shows
This is content in the default slot. No header or footer, just the main content area.
Card with Header & Icon
This card demonstrates the header slot with an icon. The icon slot is positioned before the header text.
Full Card Example
With header, content, and footer slots
This demonstrates all available slots working together. Each slot can contain any HEEx content, including components.
- Icon slot appears in the header
- Header slot contains a title and subtitle
- Default slot holds the main content
- Footer slot provides actions
Using Prop Fallback
When no header slot is provided, the
title
prop
is used as fallback content. This is a common pattern for flexible components.
How it works
1 Vue components define slot insertion points
In the Vue component, use
<slot />
for the default slot and
<slot name="header" />
for named slots. These act as placeholders for content passed from HEEx.
<slot /> <!-- default slot -->
<slot name="header" /> <!-- named slot -->2 HEEx uses :slot_name syntax to pass content
In LiveView templates, content placed directly between the
<.vue>
tags becomes the default slot. Named slots use the
:slot_name
syntax.
<.vue v-component="Card" v-socket={@socket}>
<:header>Title</:header>
Default slot content
</.vue>3 Slots can have fallback content
When a slot isn't provided, Vue renders the fallback content inside the
<slot>
tags. This is useful for optional sections or default states.
<slot name="footer">
<p>Default footer content</p>
</slot>4 Check slot presence in Vue
Use useSlots()
to conditionally render sections based on whether a slot was provided. This enables
flexible layouts that adapt to the content.
const slots = useSlots()
const hasFooter = computed(() => !!slots.footer)