Skip to content

Commit ee1e1e5

Browse files
ota-meshiFloEdelmann
ota-meshi
and
FloEdelmann
authored
Add vue/no-undef-components rule and deprecate vue/no-unregistered-components rule (#1763)
* Add `vue/no-undef-components-in-script-setup` rule * fix test case * Renamed rule and marked no-unregistered-components as deprecated * update doc * update doc * fix doc * Update docs/rules/no-undef-components.md Co-authored-by: Flo Edelmann <[email protected]> Co-authored-by: Flo Edelmann <[email protected]>
1 parent 09bc534 commit ee1e1e5

File tree

7 files changed

+1379
-2
lines changed

7 files changed

+1379
-2
lines changed

‎docs/rules/README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,8 +341,8 @@ For example:
341341
| [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes | |
342342
| [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" | |
343343
| [vue/no-this-in-before-route-enter](./no-this-in-before-route-enter.md) | disallow `this` usage in a `beforeRouteEnter` method | |
344+
| [vue/no-undef-components](./no-undef-components.md) | disallow use of undefined components in `<template>` | |
344345
| [vue/no-undef-properties](./no-undef-properties.md) | disallow undefined properties | |
345-
| [vue/no-unregistered-components](./no-unregistered-components.md) | disallow using components that are not registered inside templates | |
346346
| [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: |
347347
| [vue/no-unused-properties](./no-unused-properties.md) | disallow unused properties | |
348348
| [vue/no-unused-refs](./no-unused-refs.md) | disallow unused refs | |
@@ -414,3 +414,4 @@ The following rules extend the rules provided by ESLint itself and apply them to
414414
| [vue/experimental-script-setup-vars](./experimental-script-setup-vars.md) | (no replacement) |
415415
| [vue/name-property-casing](./name-property-casing.md) | [vue/component-definition-name-casing](./component-definition-name-casing.md) |
416416
| [vue/no-confusing-v-for-v-if](./no-confusing-v-for-v-if.md) | [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) |
417+
| [vue/no-unregistered-components](./no-unregistered-components.md) | [vue/no-undef-components](./no-undef-components.md) |

‎docs/rules/no-undef-components.md

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/no-undef-components
5+
description: disallow use of undefined components in `<template>`
6+
---
7+
# vue/no-undef-components
8+
9+
> disallow use of undefined components in `<template>`
10+
11+
- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
12+
13+
This rule warns reports component that are used in the `<template>`, but that are not defined in the `<script setup>` or the Options API's `components` section.
14+
15+
Undefined components will be resolved from globally registered components. However, if you are not using global components, you can use this rule to prevent run-time errors.
16+
17+
::: warning Note
18+
This rule cannot check globally registered components and components registered in mixins
19+
unless you add them as part of the ignored patterns.
20+
:::
21+
22+
<eslint-code-block :rules="{'vue/no-undef-components': ['error']}">
23+
24+
```vue
25+
<script setup>
26+
import Foo from './Foo.vue'
27+
</script>
28+
29+
<template>
30+
<!-- ✓ GOOD -->
31+
<Foo />
32+
33+
<!-- ✗ BAD -->
34+
<Bar />
35+
</template>
36+
```
37+
38+
</eslint-code-block>
39+
40+
<eslint-code-block :rules="{'vue/no-undef-components': ['error']}">
41+
42+
```vue
43+
<!-- ✓ GOOD -->
44+
<template>
45+
<div>
46+
<h2>Lorem ipsum</h2>
47+
<the-modal>
48+
<component is="TheInput" />
49+
<component :is="'TheDropdown'" />
50+
<TheButton>CTA</TheButton>
51+
</the-modal>
52+
</div>
53+
</template>
54+
55+
<script>
56+
import TheButton from 'components/TheButton.vue'
57+
import TheModal from 'components/TheModal.vue'
58+
import TheInput from 'components/TheInput.vue'
59+
import TheDropdown from 'components/TheDropdown.vue'
60+
61+
export default {
62+
components: {
63+
TheButton,
64+
TheModal,
65+
TheInput,
66+
TheDropdown,
67+
}
68+
}
69+
</script>
70+
```
71+
72+
</eslint-code-block>
73+
74+
<eslint-code-block :rules="{'vue/no-undef-components': ['error']}">
75+
76+
```vue
77+
<!-- ✗ BAD -->
78+
<template>
79+
<div>
80+
<h2>Lorem ipsum</h2>
81+
<TheModal />
82+
</div>
83+
</template>
84+
85+
<script>
86+
export default {
87+
components: {
88+
89+
}
90+
}
91+
</script>
92+
```
93+
94+
</eslint-code-block>
95+
96+
## :wrench: Options
97+
98+
```json
99+
{
100+
"vue/no-undef-components": ["error", {
101+
"ignorePatterns": []
102+
}]
103+
}
104+
```
105+
106+
- `ignorePatterns` Suppresses all errors if component name matches one or more patterns.
107+
108+
### `ignorePatterns: ['custom(\\-\\w+)+']`
109+
110+
<eslint-code-block :rules="{'vue/no-undef-components': ['error', { 'ignorePatterns': ['custom(\\-\\w+)+'] }]}">
111+
112+
```vue
113+
<script setup>
114+
</script>
115+
116+
<template>
117+
<!-- ✓ GOOD -->
118+
<CustomComponent />
119+
120+
<!-- ✗ BAD -->
121+
<Bar />
122+
</template>
123+
```
124+
125+
</eslint-code-block>
126+
127+
<eslint-code-block :rules="{'vue/no-undef-components': ['error', { 'ignorePatterns': ['custom(\\-\\w+)+'] }]}">
128+
129+
```vue
130+
<!-- ✓ GOOD -->
131+
<template>
132+
<div>
133+
<h2>Lorem ipsum</h2>
134+
<CustomComponent />
135+
</div>
136+
</template>
137+
138+
<script>
139+
export default {
140+
components: {
141+
142+
},
143+
}
144+
</script>
145+
```
146+
147+
</eslint-code-block>
148+
149+
<eslint-code-block :rules="{'vue/no-undef-components': ['error', { 'ignorePatterns': ['custom(\\-\\w+)+'] }]}">
150+
151+
```vue
152+
<!-- ✗ BAD -->
153+
<template>
154+
<div>
155+
<h2>Lorem ipsum</h2>
156+
<WarmButton />
157+
</div>
158+
</template>
159+
160+
<script>
161+
export default {
162+
components: {
163+
164+
},
165+
}
166+
</script>
167+
```
168+
169+
</eslint-code-block>
170+
171+
## :couple: Related Rules
172+
173+
- [vue/no-undef-properties](./no-undef-properties.md)
174+
175+
## :mag: Implementation
176+
177+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-undef-components.js)
178+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-undef-components.js)

‎docs/rules/no-unregistered-components.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ since: v7.0.0
99

1010
> disallow using components that are not registered inside templates
1111
12+
- :warning: This rule was **deprecated** and replaced by [vue/no-undef-components](no-undef-components.md) rule.
13+
1214
## :book: Rule Details
1315

1416
This rule reports components that haven't been registered and are being used in the template.

‎lib/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ module.exports = {
128128
'no-template-target-blank': require('./rules/no-template-target-blank'),
129129
'no-textarea-mustache': require('./rules/no-textarea-mustache'),
130130
'no-this-in-before-route-enter': require('./rules/no-this-in-before-route-enter'),
131+
'no-undef-components': require('./rules/no-undef-components'),
131132
'no-undef-properties': require('./rules/no-undef-properties'),
132133
'no-unregistered-components': require('./rules/no-unregistered-components'),
133134
'no-unsupported-features': require('./rules/no-unsupported-features'),

0 commit comments

Comments
 (0)