1---
2title: Self-Referencing Components Use Filename as Implicit Name
3impact: LOW
4impactDescription: Understanding this avoids confusion with recursive components
5type: gotcha
6tags: [vue3, component-registration, self-reference, recursive-components, sfc]
7---
8 
9# Self-Referencing Components Use Filename as Implicit Name
10 
11**Impact: LOW** - In Single-File Components (SFC), a component can reference itself in its own template using its filename as the component name. This is useful for recursive components like tree structures or nested comments. However, this implicit registration has lower priority than explicitly imported components, which can cause confusion.
12 
13## Task Checklist
14 
15- [ ] Use the filename (without extension) to self-reference a component
16- [ ] Be aware that imported components take precedence over self-reference
17- [ ] For clarity in recursive components, consider explicit naming
18 
19**Example:**
20```vue
21<!-- TreeItem.vue -->
22<script setup>
23defineProps({
24  item: Object
25})
26</script>
27 
28<template>
29  <div class="tree-item">
30    <span>{{ item.name }}</span>
31    <!-- Self-reference using filename -->
32    <TreeItem
33      v-for="child in item.children"
34      :key="child.id"
35      :item="child"
36    />
37  </div>
38</template>
39```
40 
41```vue
42<!-- Comment.vue - recursive comments -->
43<script setup>
44defineProps({
45  comment: Object
46})
47</script>
48 
49<template>
50  <div class="comment">
51    <p>{{ comment.text }}</p>
52    <div class="replies" v-if="comment.replies?.length">
53      <!-- Self-reference for nested replies -->
54      <Comment
55        v-for="reply in comment.replies"
56        :key="reply.id"
57        :comment="reply"
58      />
59    </div>
60  </div>
61</template>
62```
63 
64## Priority: Imports Override Self-Reference
65 
66```vue
67<!-- FooBar.vue -->
68<script setup>
69// If you import a component named FooBar, it takes precedence
70import FooBar from './different/FooBar.vue'
71</script>
72 
73<template>
74  <!-- This renders the IMPORTED FooBar, not this file -->
75  <FooBar />
76</template>
77```
78 
79To explicitly self-reference when there's a naming conflict:
80 
81```vue
82<!-- FooBar.vue -->
83<script setup>
84import OtherFooBar from './different/FooBar.vue'
85// No way to explicitly import "self" in script setup
86// Must rename the import to avoid conflict
87</script>
88 
89<template>
90  <OtherFooBar />
91  <!-- FooBar still refers to self (this file) because
92       the import was aliased -->
93  <FooBar />
94</template>
95```
96 
97## Options API: Explicit Name Option
98 
99```vue
100<!-- RecursiveList.vue -->
101<script>
102export default {
103  name: 'RecursiveList', // Explicit name for self-reference
104  props: {
105    items: Array
106  }
107}
108</script>
109 
110<template>
111  <ul>
112    <li v-for="item in items" :key="item.id">
113      {{ item.name }}
114      <RecursiveList v-if="item.children" :items="item.children" />
115    </li>
116  </ul>
117</template>
118```
119 
120## Common Use Cases for Self-Reference
121 
1221. **Tree structures** - File explorers, org charts
1232. **Nested comments** - Reddit-style comment threads
1243. **Menu navigation** - Recursive dropdown menus
1254. **Category hierarchies** - Product categories, taxonomies
126 
127## Avoid Infinite Recursion
128 
129```vue
130<!-- TreeNode.vue -->
131<script setup>
132defineProps({
133  node: Object,
134  maxDepth: { type: Number, default: 10 },
135  currentDepth: { type: Number, default: 0 }
136})
137</script>
138 
139<template>
140  <div class="node">
141    {{ node.name }}
142    <!-- Guard against infinite recursion -->
143    <template v-if="node.children && currentDepth < maxDepth">
144      <TreeNode
145        v-for="child in node.children"
146        :key="child.id"
147        :node="child"
148        :max-depth="maxDepth"
149        :current-depth="currentDepth + 1"
150      />
151    </template>
152  </div>
153</template>
154```
155 
156## Reference
157- [Vue.js Component Registration](https://vuejs.org/guide/components/registration.html)
158