Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ee1e1e5

Browse files
ota-meshiFloEdelmann
andauthored
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 <florian-edelmann@online.de> Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
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)

AltStyle によって変換されたページ (->オリジナル) /