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
json
{
"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
🚀 Version
This rule was introduced in eslint-plugin-vue v3.9.0