pageClass	sidebarDepth	title	description
rule-details	0	vue/component-definition-name-casing	enforce specific casing for component definition name

vue/component-definition-name-casing

enforce specific casing for component definition name

⚙️ This rule is included in "plugin:vue/strongly-recommended" and "plugin:vue/recommended".
🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

Define a style for component definition name casing for consistency purposes.

📖 Rule Details

This rule aims to warn the component definition names other than the configured casing.

Default casing is set to PascalCase.

{
  "vue/component-definition-name-casing": ["error", "PascalCase" | "kebab-case"]
}

<script>
export default {
  /* ✓ GOOD */
  name: 'MyComponent'
}
</script>

<script>
export default {
  /* ✗ BAD */
  name: 'my-component'
}
</script>

/* ✓ GOOD */
Vue.component('MyComponent', {
  
})

/* ✗ BAD */
Vue.component('my-component', {
  
})

<script>
export default {
  /* ✓ GOOD */
  name: 'my-component'
}
</script>

<script>
export default {
  /* ✗ BAD */
  name: 'MyComponent'
}
</script>

/* ✓ GOOD */
Vue.component('my-component', {
  
})

/* ✗ BAD */
Vue.component('MyComponent', {
  
})