eslint-plugin-vue

Appearance

vue/component-options-name-casing ​

enforce the casing of component name in components options

  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.
  • 💡 Some problems reported by this rule are manually fixable by editor suggestions.

📖 Rule Details ​

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

🔧 Options ​

json
{  "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.

Please note that if you use kebab case in components options, you can only use kebab case in template; and if you use camel case in components options, you can't use pascal case in template.

For demonstration, the code example is invalid:

vue
<template>  <div>  <!-- All are invalid. DO NOT use like these. -->  <KebabCase />  <kebabCase />  <CamelCase />  </div> </template>  <script> export default {  components: {  camelCase: MyComponent,  'kebab-case': MyComponent  } } </script>

"PascalCase" (default) ​

Now loading...
Now loading...

"kebab-case" ​

Now loading...
Now loading...

"camelCase" ​

Now loading...
Now loading...

🚀 Version ​

This rule was introduced in eslint-plugin-vue v8.2.0

🔍 Implementation ​