Slots

A slot is a placeholder inside a child component's template that allows a parent component to inject custom content, making the child component flexible and reusable by letting the parent control parts of its layout.

Example

React 19, Functional components

ChildComponent.jsx

export default function ChildComponent({ children }) {  return <div className="wrapper">{children}</div>;}

ParentComponent.jsx

export default function ParentComponent() {  return (    <ChildComponent>      <p>Content for the child component's slot.</p>    </ChildComponent>  );}

Vue 3.5, Composition API

ChildComponent.vue

<template>  <div class="wrapper">    <slot />  </div></template>

ParentComponent.vue

<template>  <ChildComponent>    <p>Content for the child component's slot.</p>  </ChildComponent></template>

Fallback

Slots should have fallback (default) content.

React 19, Functional components

IconButton.jsx

export default function IconButton({ children }) {  return (    <button className="btn">      {children || <span>👆</span>}    </button>  );}

Usage:

export default function() {  return (    <div>      <IconButton />      <IconButton>        <span>❤️</span>      </IconButton>    </div>  );}

Vue 3.5, Composition API

IconButton.vue

<template>  <button class="btn">    <slot>      <span>👆</span>    </slot>  </button></template>

Usage:

<template>  <div>    <IconButton />    <IconButton>      <span>❤️</span>    </IconButton>  </div></template>