1---
2title: Use Explicit Default Template When Mixing Named and Scoped Slots
3impact: HIGH
4impactDescription: Mixing v-slot on component with named slots inside causes ambiguous scope and compilation errors
5type: gotcha
6tags: [vue3, slots, scoped-slots, named-slots, compilation-error]
7---
8 
9# Use Explicit Default Template When Mixing Named and Scoped Slots
10 
11**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.
12 
13## Task Checklist
14 
15- [ ] When using named slots alongside a default slot with props, always use explicit `<template #default>`
16- [ ] Never mix `v-slot` on the component element with `<template #name>` inside
17- [ ] Keep slot scope clear and unambiguous
18 
19**Incorrect:**
20```vue
21<script setup>
22import MyComponent from './MyComponent.vue'
23</script>
24 
25<template>
26  <!-- BAD: v-slot on component + named template inside causes ambiguity -->
27  <MyComponent v-slot="{ message }">
28    <p>{{ message }}</p>
29 
30    <template #footer>
31      <!-- Ambiguous: Is 'message' available here? Vue can't determine -->
32      <p>Footer: {{ message }}</p>
33    </template>
34  </MyComponent>
35</template>
36```
37 
38This causes a compilation error because Vue cannot determine:
391. Whether `message` from the default slot should be available in the footer slot
402. Which scope applies to the non-template content
41 
42**Correct:**
43```vue
44<script setup>
45import MyComponent from './MyComponent.vue'
46</script>
47 
48<template>
49  <!-- GOOD: Explicit template for each slot with clear scope -->
50  <MyComponent>
51    <template #default="{ message }">
52      <p>{{ message }}</p>
53    </template>
54 
55    <template #footer>
56      <!-- Clear: footer slot has its own scope, no access to default's 'message' -->
57      <p>Footer content here</p>
58    </template>
59  </MyComponent>
60</template>
61```
62 
63**Correct - When Footer Also Has Props:**
64```vue
65<script setup>
66import MyComponent from './MyComponent.vue'
67</script>
68 
69<template>
70  <MyComponent>
71    <template #default="{ message }">
72      <p>{{ message }}</p>
73    </template>
74 
75    <template #footer="{ year }">
76      <!-- Each slot receives its own props -->
77      <p>Copyright {{ year }}</p>
78    </template>
79  </MyComponent>
80</template>
81```
82 
83## The Rule
84 
85When 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.
86 
87| Pattern | Valid? | Notes |
88|---------|--------|-------|
89| `v-slot` on component only | Yes | Single default scoped slot |
90| Named templates only | Yes | Multiple named slots |
91| `v-slot` on component + named templates | No | Ambiguous scope |
92| All explicit templates | Yes | Clear scope for each slot |
93 
94## Reference
95- [Vue.js Slots - Named Scoped Slots](https://vuejs.org/guide/components/slots.html#named-scoped-slots)
96