Vue component name should be defined with valid string
- VUE_BAD_COMPONENT_NAME
- Error
- Medium
- vue
This rule applies when an invalid string is used as a Vue component name.
Vue component is not registered when you use invalid name for it. Also Vue outputs a warning message.
It can be applied to the following:
- The name does not start with a Latin alphabet letter (e.g.
123abc). - Characters not conforming to the HTML5 custom element specification are used (e.g.
abc!). - Vue's built-in component
slotorcomponentis used. - HTML or SVG tag names are used (e.g.
div).
Noncompliant Code Example
View with compliant examples side by sideimport Vue from 'vue';
// Example 1
Vue.component('123abc', { // VUE_BAD_COMPONENT_NAME alarm because '123abc' does not start with a letter.
data() {
return { msg: 'hi' };
},
template: '<div>{{ msg }}</div>'
});
// Example 2
Vue.extend({
name: 'slot', // VUE_BAD_COMPONENT_NAME alarm because 'slot' is Vue's built-in component.
data() {
return { msg: 'hi' };
},
template: '<div>{{ msg }}</div>'
});
// Example 3
new Vue({
el: '#app',
components: {
div: { // VUE_BAD_COMPONENT_NAME alarm because 'div' is a HTML tag name.
data() {
return { msg: 'hi' };
},
template: '<div>{{ msg }}</div>'
}
},
template: '<div />'
});Compliant Code Example
View with noncompliant examples side by sideimport Vue from 'vue';
// Example 1
Vue.component('abc123', {
data() {
return { msg: 'hi' };
},
template: '<div>{{ msg }}</div>'
});
// Example 2
Vue.extend({
name: 'hello-slot',
data() {
return { msg: 'hi' };
},
template: '<div>{{ msg }}</div>'
});
// Example 3
new Vue({
el: '#app',
components: {
hello: {
data() {
return { msg: 'hi' };
},
template: '<div>{{ msg }}</div>'
}
},
template: '<hello />'
});Version
This rule was introduced in DeepScan 1.14.0-beta.
See
[Vue warn]: Invalid component name:
123abc. Component names should conform to valid custom element name in html5 specification.[Vue warn]: Do not use built-in or reserved HTML elements as component id: div