slots Declarative Slot Access (3.3+)
Last updated: 2026-10-22
slots Declarative Slot Access (3.3+)
The slots option declares slot access as a function, producing a tracked $slots — slot presence becomes reactive.
| Group | Options: Rendering & Lifecycle |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
slots: { default: () => [], header: () => [] }
}⚙️ Arguments
| value | An object keyed by slot name with functions returning content |
|---|
Returns：No return — populates $slots
▶ Example
Edit the code below and see the live result:
Output：
Shows the parent's header content.💡 Key Points
ℹ️ Note Added in 3.3 to fix stale slot-presence checks.
💡 Tip Preferred in component libraries for presence checks.
⚠️ Warning List every slot — omissions break access.
🏷️ Related Rendering & Lifecycle
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Difference from $slots?
A Same data, now with dependency tracking.
Q Must all slots be listed?
A Yes — undeclared slots are absent.
Q Relation to useSlots?
A The options-side counterpart of useSlots().
