vue/no-reserved-component-names Correctness
What it does
Disallow Vue component names that collide with HTML / SVG element names (and optionally Vue built-in component names).
Why is this bad?
Using a reserved name silently shadows the standard element / built-in component, producing confusing behavior at runtime.
Examples
Examples of incorrect code for this rule:
<script>
export default {
name: "div",
};
</script>Examples of correct code for this rule:
<script>
export default {
name: "MyComponent",
};
</script>Configuration
This rule accepts a configuration object with the following properties:
disallowVue3BuiltInComponents
type: boolean
default: false
Disallow Vue 3 built-in component names (e.g. Teleport, Suspense). Note: this also catches Vue 2 built-ins because Vue 3's set includes them.
disallowVueBuiltInComponents
type: boolean
default: false
Disallow Vue 2 built-in component names (e.g. Transition, KeepAlive).
htmlElementCaseSensitive
type: boolean
default: false
Match HTML / SVG element names case-sensitively. When false (default), the capitalized form of an HTML element (e.g. Div) is also reported.
How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["vue"],
"rules": {
"vue/no-reserved-component-names": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["vue"],
rules: {
"vue/no-reserved-component-names": "error",
},
});oxlint --deny vue/no-reserved-component-names --vue-pluginVersion
This rule was added in vnext.