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:

  1. The name does not start with a letter (e.g. 123abc)
  2. Non-alphanumeric characters except underscore(_) and hyphen(-) are used (e.g. abc123!)
  3. Vue's built-in component slot or component is used
  4. HTML or SVG tag names are used (e.g. div)

Noncompliant Code Example

View with compliant examples side by side
import 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 side
import 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 can only contain alphanumeric characters and the hyphen, and must start with a letter.

  • [Vue warn]: Do not use built-in or reserved HTML elements as component id: div