useSlots() Access Slot Content
Last updated: 2026-10-22
useSlots() Access Slot Content
useSlots() exposes the slot functions passed by the parent — handy to test presence or render slots in script.
| Group | Template & Helpers |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
const slots = useSlots()
if (slots.header) { /* the parent provided a header slot */ }Returns：An object of slot functions (default and named)
▶ Example
Edit the code below and see the live result:
Output：
The first card shows the parent header; the second falls back to 'Default title'.💡 Key Points
💡 Tip Presence checks are the classic use: parent content or a fallback.
ℹ️ Note Templates use directly; the helper serves script-side conditions.
⚠️ Warning Treat it with care in reactive computations — slot sets may change.
🏷️ Related Template & Helpers
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Difference from $slots?
A The composable equivalent of the $slots instance property.
Q Can I call a slot function?
A Yes (slots.default()), though templates usually handle rendering.
Q Where is presence testing used?
A Cards, modals and tables with optional header or footer areas.
