JS.VUE.COMPONENT.OPTIONS.NAME.CASING

• Some problems reported by this rule are manually fixable by editor suggestions (https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).

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.

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:

<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)

{'vue/component-options-name-casing': ['error']}

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

{'vue/component-options-name-casing': ['error']}

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

"kebab-case"

{'vue/component-options-name-casing': ['error', 'kebab-case']}

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

{'vue/component-options-name-casing': ['error', 'kebab-case']}

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

"camelCase"

{'vue/component-options-name-casing': ['error', 'camelCase']}

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

{'vue/component-options-name-casing': ['error', 'camelCase']}

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