---
url: /docs/guide/usage/linter/rules/vue/component-definition-name-casing.md
---

### 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`):

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

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

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

## Configuration

This rule accepts one of the following string values:

type: `"PascalCase" | "kebab-case"`

## How to use

## Version

This rule was added in v1.68.0.

## References