← Back to rules

vue/component-definition-name-casing Style

🛠️ An auto-fix is available for this rule.

What it does

Enforce specific casing for component definition names.

Why is this bad?

Defining component names without a consistent casing makes templates harder to read and harder to grep. Picking either PascalCase or kebab-case and sticking with it across the codebase removes a class of bikeshedding and search misses.

Examples

Examples of incorrect code for this rule (default PascalCase):

<script>
export default {
  name: "foo-bar",
};
</script>

Examples of correct code for this rule (default PascalCase):

<script>
export default {
  name: "FooBar",
};
</script>

Configuration

This rule accepts one of the following string values:

type: "PascalCase" | "kebab-case"

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/component-definition-name-casing": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["vue"],
  rules: {
    "vue/component-definition-name-casing": "error",
  },
});

CLI

oxlint --deny vue/component-definition-name-casing --vue-plugin

Version

This rule was added in vnext.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground