Named slots in Vue 3: composing components without extra props

A named slot is a named hole: the child declares <slot name="header"> and the parent fills it with <template #header>. The component keeps no props and no content logic.

The component that owns the layout

defineProps();



  
    
      
        {{ title }}
      
    

    

    
      
    
  

Content inside <slot> is the fallback: it shows only when the parent passes nothing. The card therefore works on its own and accepts customisation when needed.

Scoped slots: data from child to parent

const rows = [
  { id: 1, name: "Ada", role: "admin" },
  { id: 2, name: "Linus", role: "editor" },
];



  
    
      
        {{ row.name }}
      
    
  

The child decides which data to expose, the parent how to show it. That is the difference from a prop: here the structure stays in the child and the rendering in the parent.

Slots or props?

Common mistakes

• Renaming a slot without updating the parent: the content can vanish with no visible error.
• Putting #header and v-slot on the same tag: the compiler reports a syntax error.
• Skipping the fallback: with an empty parent you get a hole in the layout.
• Using a slot inside a v-for without :key on the node outside the list.

The limitation to plan for

Slots have no type contract on their content: TypeScript checks the data of a scoped slot, not what the parent writes inside. A wrong name produces a silent hole, not a compile error.

Where to go next

In the catalogue: shadcn-vue, vue-bits and Ant Design Vue; ready-made layouts are in /blocks. The guides: Composition API and props that do not update. The comparison: Vue vs React, where the same job goes through children.