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. HTML or SVG tag names are used (e.g. header).
2. Vue's built-in component slot or component is used.

Noncompliant Code Example

import { createApp } from 'vue';
import App from './App.vue';
import Header from './components/Header.vue';

const app = createApp(App);
app.component('header', Header); // VUE_BAD_COMPONENT_NAME alarm because 'header' is a HTML tag name.

Compliant Code Example

import { createApp } from 'vue';
import App from './App.vue';
import TheHeader from './components/TheHeader.vue';

const app = createApp(App);
app.component('TheHeader', TheHeader);

Version

This rule was introduced in DeepScan 1.14.0-beta.

See

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