Vue Slots: Projecting Content into Components

WHY IT EXISTS Props are great for passing data like strings, numbers, or objects into a component. But what if you need to pass a whole chunk of HTML, or even other components? Slots solve this problem of content projection, allowing a parent to pass template fragments into a child's designated area, enabling far more flexible and reusable component designs.

THE MENTAL MODEL A component with a slot is like a function that accepts a template fragment as an argument. The child component defines a template with a <slot> outlet, which acts as a placeholder. The parent component then "calls" this child and passes in the content that will fill that placeholder. For example, a <FancyButton> component provides the button styling and behavior, while the parent provides the text and icons to be displayed inside it.

HOW IT WORKS In the child component's template, you place a <slot></slot> element. This is the "slot outlet" where content will be rendered. In the parent component, you use the child component's tags and place the content you want to project directly inside them, like <MyComponent>This content goes into the slot.</MyComponent>. Vue takes the content from the parent and renders it where the <slot> outlet was in the child. You can also provide fallback content inside the child's <slot> tags, which is displayed only if the parent provides no content.

WHEN TO USE IT Use slots when creating generic, reusable wrapper components. This is common for UI elements like modals (where the frame is the same but the body changes), cards, page layouts, or buttons that need to accept more than just a text label (like an icon plus text). It cleanly decouples the container from its content.

WHEN NOT TO USE IT If you only need to pass simple data like a string, number, or boolean, a prop is simpler and more direct. Slots are for passing structural content like HTML or other components. Using slots for simple data is overkill and can make the component's public interface less clear than using explicitly defined props.

ONE CANONICAL EXAMPLE A generic <Card> component is a perfect use case. The child component, <Card>, defines the structure: <slot></slot>. The parent can then use it for anything: <Card><h2>User Profile</h2>Some profile text...</Card>. The key footgun is render scope: the slot content is defined in the parent, so it has access to the parent's data scope, not the child's. An expression like {{ message }} inside the slot will resolve to the parent's message data property, not one from the <Card> component.