attribute-hyphenation.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/attribute-hyphenation	enforce attribute naming style on custom components in template	v3.9.0

vue/attribute-hyphenation

enforce attribute naming style on custom components in template

• ⚙️ This rule is included in all of "plugin:vue/strongly-recommended", *.configs["flat/strongly-recommended"], "plugin:vue/vue2-strongly-recommended", *.configs["flat/vue2-strongly-recommended"], "plugin:vue/recommended", *.configs["flat/recommended"], "plugin:vue/vue2-recommended" and *.configs["flat/vue2-recommended"].
• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule enforces using hyphenated attribute names on custom components in Vue templates.

<template>
  <!-- ✓ GOOD -->
  <MyComponent my-prop="prop" />

  <!-- ✗ BAD -->
  <MyComponent myProp="prop" />
</template>

🔧 Options

{
  "vue/attribute-hyphenation": ["error", "always" | "never", {
    "ignore": [],
    "ignoreTags": []
  }]
}

Default casing is set to always. By default the following attributes are ignored: data-, aria-, slot-scope, and all the SVG attributes with either an upper case letter or an hyphen.

• "always" (default) ... Use hyphenated attribute name.
• "never" ... Don't use hyphenated attribute name.
• "ignore" ... Array of attribute names that don't need to follow the specified casing.
• "ignoreTags" ... Array of tag names whose attributes don't need to follow the specified casing.

"always"

It errors on upper case letters.

<template>
  <!-- ✓ GOOD -->
  <MyComponent my-prop="prop" />

  <!-- ✗ BAD -->
  <MyComponent myProp="prop" />
</template>

"never"

It errors on hyphens except on the attributes in the ignored attributes list.

<template>
  <!-- ✓ GOOD -->
  <MyComponent myProp="prop" />
  <MyComponent data-id="prop" />
  <MyComponent aria-role="button" />
  <MyComponent slot-scope="prop" />

  <!-- ✗ BAD -->
  <MyComponent my-prop="prop" />
</template>

"never", { "ignore": ["custom-prop"] }

Don't use hyphenated name but allow custom attributes

<template>
  <!-- ✓ GOOD -->
  <MyComponent myProp="prop" />
  <MyComponent custom-prop="prop" />
  <MyComponent data-id="prop" />
  <MyComponent aria-role="button" />
  <MyComponent slot-scope="prop" />

  <!-- ✗ BAD -->
  <MyComponent my-prop="prop" />
</template>

"never", { "ignoreTags": ["/^custom-/"] }

<template>
  <!-- ✓ GOOD -->
  <custom-component my-prop="prop" />

  <!-- ✗ BAD -->
  <my-component my-prop="prop" />
</template>

👫 Related Rules

• vue/v-on-event-hyphenation
• vue/prop-name-casing

🚀 Version

This rule was introduced in eslint-plugin-vue v3.9.0

🔍 Implementation

• Rule source
• Test source