vue/component-name-in-template-casing

enforce specific casing for the component naming style in template

  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

Define a style for the component name in template casing for consistency purposes.

📖 Rule Details

This rule aims to warn the tag names other than the configured casing in Vue.js template.

🔧 Options

{
  "vue/component-name-in-template-casing": ["error", "PascalCase" | "kebab-case", { 
    "ignores": []
  }]
}
  • "PascalCase" (default) ... enforce tag names to pascal case. E.g. <CoolComponent>. This is consistent with the JSX practice.
  • "kebab-case" ... enforce tag names to kebab case: E.g. <cool-component>. This is consistent with the HTML practice which is case-insensitive originally.
  • ignores (string[]) ... The element names to ignore. Sets the element name to allow. For example, a custom element or a non-Vue component.

"PascalCase"

<template> <!-- ✓ GOOD --> <TheComponent /> <!-- ✗ BAD --> <the-component /> <theComponent /> <The-component /> </template>
Now loading...

"kebab-case"

<template> <!-- ✓ GOOD --> <the-component /> <!-- ✗ BAD --> <TheComponent /> <theComponent /> <Thecomponent /> <The-component /> </template>
Now loading...

"PascalCase", { ignores: ["custom-element"] }

<template> <!-- ✓ GOOD --> <TheComponent/> <custom-element></custom-element> <!-- ✗ BAD --> <magic-element></magic-element> </template>
Now loading...

📚 Further reading

🔍 Implementation

Last Updated: 1/2/2019, 1:51:25 PM