Dynamic Slot Names
v-slot:[dynamicName], programmatic slot selection, conditional slot rendering.
Dynamic Slot Names is a free Vue Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Dynamic Slot Names
Sometimes the slot you want to fill is not known until runtime - it depends on a prop, state, or loop variable. Vue lets you compute a slot name with square-bracket syntax.
The Dynamic Argument Syntax
Wrap an expression in square brackets after v-slot:. Vue evaluates it to determine the target slot name.
<MyComponent>
<template v-slot:[dynamicName]>
Goes into whatever slot dynamicName equals
</template>
</MyComponent>Shorthand with Brackets
The # shorthand also supports dynamic arguments.
<MyComponent>
<template #[dynamicName]>
Dynamic slot content
</template>
</MyComponent>Driving the Name from State
The bracket expression can read any reactive value. Toggling the variable changes which slot the content fills.
const dynamicName = ref("header");
// later: dynamicName.value = "footer";Switching Rendered Content
Combined with a child that defines several named slots, dynamic names let one template light up different regions based on state.
<!-- child has slots: header, body, footer -->
<Panel>
<template #[activeSection]>
Active content here
</template>
</Panel>Choosing Names from Props
A component prop can decide the slot. This is handy for configurable wrappers where the caller picks the region.
const props = defineProps({ target: String });
// use props.target inside #[props.target]Iterating Dynamic Slots
You can render slots in a loop by computing each name from the loop item - useful for table columns or tab systems.
<template
v-for="col in columns"
v-slot:[col.name]="{ row }"
>
{{ row[col.field] }}
</template>Lowercase and Valid Names
Dynamic slot names should resolve to valid strings. Null is treated as the default slot. Avoid spaces and characters that are invalid in HTML attribute names when using inline templates.
const name = condition ? "primary" : null;
// null -> default slotConditional Slot Selection
A ternary inside the brackets selects between slots based on a condition, all in the template.
<Alert>
<template #[isError ? 'error' : 'info']>
{{ message }}
</template>
</Alert>A Tab Component Use Case
A Tabs component can render the active tab content by computing the slot name from the selected tab id, keeping the parent declarative.
<Tabs>
<template #[currentTab]>
{{ tabContent }}
</template>
</Tabs>Keep It Readable
Dynamic slots are powerful but can obscure intent. Prefer them when the set of slots is truly data-driven; for a fixed handful, plain named slots read more clearly.
Quick Check
Which syntax selects a slot whose name is computed at runtime?
Recap
You learned dynamic slot names use bracket syntax v-slot:[expr] or #[expr] to compute which slot to fill from props or state, enabling configurable wrappers, tab systems, and data-driven column rendering.
Frequently asked questions
Is the “Dynamic Slot Names” lesson free?
Yes — the full text of “Dynamic Slot Names” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “Dynamic Slot Names”?
v-slot:[dynamicName], programmatic slot selection, conditional slot rendering. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Dynamic Slot Names” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.