f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
96 lines
2.9 KiB
Markdown
96 lines
2.9 KiB
Markdown
---
|
|
title: Use Explicit Default Template When Mixing Named and Scoped Slots
|
|
impact: HIGH
|
|
impactDescription: Mixing v-slot on component with named slots inside causes ambiguous scope and compilation errors
|
|
type: gotcha
|
|
tags: [vue3, slots, scoped-slots, named-slots, compilation-error]
|
|
---
|
|
|
|
# Use Explicit Default Template When Mixing Named and Scoped Slots
|
|
|
|
**Impact: HIGH** - When a component uses both the default scoped slot and named slots, you must use an explicit `<template #default>` for the default slot. Using `v-slot` directly on the component while having nested named slot templates causes scope ambiguity and compilation errors.
|
|
|
|
## Task Checklist
|
|
|
|
- [ ] When using named slots alongside a default slot with props, always use explicit `<template #default>`
|
|
- [ ] Never mix `v-slot` on the component element with `<template #name>` inside
|
|
- [ ] Keep slot scope clear and unambiguous
|
|
|
|
**Incorrect:**
|
|
```vue
|
|
<script setup>
|
|
import MyComponent from './MyComponent.vue'
|
|
</script>
|
|
|
|
<template>
|
|
<!-- BAD: v-slot on component + named template inside causes ambiguity -->
|
|
<MyComponent v-slot="{ message }">
|
|
<p>{{ message }}</p>
|
|
|
|
<template #footer>
|
|
<!-- Ambiguous: Is 'message' available here? Vue can't determine -->
|
|
<p>Footer: {{ message }}</p>
|
|
</template>
|
|
</MyComponent>
|
|
</template>
|
|
```
|
|
|
|
This causes a compilation error because Vue cannot determine:
|
|
1. Whether `message` from the default slot should be available in the footer slot
|
|
2. Which scope applies to the non-template content
|
|
|
|
**Correct:**
|
|
```vue
|
|
<script setup>
|
|
import MyComponent from './MyComponent.vue'
|
|
</script>
|
|
|
|
<template>
|
|
<!-- GOOD: Explicit template for each slot with clear scope -->
|
|
<MyComponent>
|
|
<template #default="{ message }">
|
|
<p>{{ message }}</p>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<!-- Clear: footer slot has its own scope, no access to default's 'message' -->
|
|
<p>Footer content here</p>
|
|
</template>
|
|
</MyComponent>
|
|
</template>
|
|
```
|
|
|
|
**Correct - When Footer Also Has Props:**
|
|
```vue
|
|
<script setup>
|
|
import MyComponent from './MyComponent.vue'
|
|
</script>
|
|
|
|
<template>
|
|
<MyComponent>
|
|
<template #default="{ message }">
|
|
<p>{{ message }}</p>
|
|
</template>
|
|
|
|
<template #footer="{ year }">
|
|
<!-- Each slot receives its own props -->
|
|
<p>Copyright {{ year }}</p>
|
|
</template>
|
|
</MyComponent>
|
|
</template>
|
|
```
|
|
|
|
## The Rule
|
|
|
|
When you have **any** named slots (`<template #name>`), always use explicit templates for **all** slots, including the default slot. This makes scope boundaries clear and prevents compilation errors.
|
|
|
|
| Pattern | Valid? | Notes |
|
|
|---------|--------|-------|
|
|
| `v-slot` on component only | Yes | Single default scoped slot |
|
|
| Named templates only | Yes | Multiple named slots |
|
|
| `v-slot` on component + named templates | No | Ambiguous scope |
|
|
| All explicit templates | Yes | Clear scope for each slot |
|
|
|
|
## Reference
|
|
- [Vue.js Slots - Named Scoped Slots](https://vuejs.org/guide/components/slots.html#named-scoped-slots)
|