component-options-name-casing.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/component-options-name-casing	enforce the casing of component name in `components` options

vue/component-options-name-casing

enforce the casing of component name in components options

• ❗ This rule has not been released yet.
• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule aims to enforce casing of the component names in components options.

🔧 Options

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

This rule has an option which can be one of these values:

• "PascalCase" (default) ... enforce component names to pascal case.
• "kebab-case" ... enforce component names to kebab case.
• "camelCase" ... enforce component names to camel case.

"PascalCase" (default)

<script>
export default {
  /* ✓ GOOD */
  components: {
    AppHeader,
    AppSidebar
  }
}
</script>

<script>
export default {
  /* ✗ BAD */
  components: {
    appHeader,
    'app-sidebar': AppSidebar
  }
}
</script>

"kebab-case"

<script>
export default {
  /* ✓ GOOD */
  components: {
    'app-header': AppHeader,
    'app-sidebar': appSidebar
  }
}
</script>

<script>
export default {
  /* ✗ BAD */
  components: {
    AppHeader,
    appSidebar
  }
}
</script>

"camelCase"

<script>
export default {
  /* ✓ GOOD */
  components: {
    appHeader,
    appSidebar
  }
}
</script>

<script>
export default {
  /* ✗ BAD */
  components: {
    AppHeader,
    'app-sidebar': appSidebar
  }
}
</script>

🔍 Implementation

• Rule source
• Test source