1---
2title: Non-Template Content Is Implicitly Default Slot Content
3impact: LOW
4impactDescription: Unexpected content placement when mixing named slots with loose content
5type: gotcha
6tags: [vue3, slots, named-slots, default-slot, implicit-behavior]
7---
8 
9# Non-Template Content Is Implicitly Default Slot Content
10 
11**Impact: LOW** - When using named slots, any top-level content not wrapped in a `<template>` tag is automatically treated as default slot content. This implicit behavior can cause confusion about where content will render.
12 
13## Task Checklist
14 
15- [ ] Understand that loose content goes to the default slot
16- [ ] Use explicit `<template #default>` when clarity matters
17- [ ] Keep slot content organization intentional
18 
19**The Implicit Behavior:**
20```vue
21<script setup>
22import BaseLayout from './BaseLayout.vue'
23</script>
24 
25<template>
26  <BaseLayout>
27    <template #header>
28      <h1>Page Title</h1>
29    </template>
30 
31    <!-- These are IMPLICITLY in the default slot -->
32    <p>First paragraph of main content.</p>
33    <p>Second paragraph of main content.</p>
34 
35    <template #footer>
36      <p>Footer content</p>
37    </template>
38  </BaseLayout>
39</template>
40```
41 
42The two `<p>` elements are automatically placed in `<slot>` (the default slot) in the child component.
43 
44**Equivalent Explicit Version:**
45```vue
46<template>
47  <BaseLayout>
48    <template #header>
49      <h1>Page Title</h1>
50    </template>
51 
52    <!-- Explicit default slot -->
53    <template #default>
54      <p>First paragraph of main content.</p>
55      <p>Second paragraph of main content.</p>
56    </template>
57 
58    <template #footer>
59      <p>Footer content</p>
60    </template>
61  </BaseLayout>
62</template>
63```
64 
65## When Implicit Behavior Causes Confusion
66 
67**Scattered Content:**
68```vue
69<template>
70  <BaseLayout>
71    <template #header>
72      <h1>Title</h1>
73    </template>
74 
75    <p>Content A</p>  <!-- Goes to default slot -->
76 
77    <template #sidebar>
78      <nav>Navigation</nav>
79    </template>
80 
81    <p>Content B</p>  <!-- Also goes to default slot! -->
82 
83    <template #footer>
84      <p>Footer</p>
85    </template>
86 
87    <p>Content C</p>  <!-- Also goes to default slot! -->
88  </BaseLayout>
89</template>
90```
91 
92All three `<p>` elements end up in the default slot together, which may not be the intended order or grouping.
93 
94**Clearer with Explicit Default:**
95```vue
96<template>
97  <BaseLayout>
98    <template #header>
99      <h1>Title</h1>
100    </template>
101 
102    <template #default>
103      <p>Content A</p>
104      <p>Content B</p>
105      <p>Content C</p>
106    </template>
107 
108    <template #sidebar>
109      <nav>Navigation</nav>
110    </template>
111 
112    <template #footer>
113      <p>Footer</p>
114    </template>
115  </BaseLayout>
116</template>
117```
118 
119## Best Practices
120 
121| Scenario | Recommendation |
122|----------|---------------|
123| Only default slot used | Implicit is fine |
124| Mixed named + default slots | Consider explicit `#default` |
125| Complex layouts | Always use explicit templates |
126| Team/shared codebase | Prefer explicit for clarity |
127 
128## The Child Component
129 
130```vue
131<!-- BaseLayout.vue -->
132<template>
133  <div class="layout">
134    <header>
135      <slot name="header"></slot>
136    </header>
137 
138    <aside>
139      <slot name="sidebar"></slot>
140    </aside>
141 
142    <main>
143      <!-- All implicit content ends up here -->
144      <slot></slot>
145    </main>
146 
147    <footer>
148      <slot name="footer"></slot>
149    </footer>
150  </div>
151</template>
152```
153 
154## Reference
155- [Vue.js Slots - Named Slots](https://vuejs.org/guide/components/slots.html#named-slots)
156