vue/attribute-hyphenation
enforce attribute naming style on custom components in template
- ⚙️ This rule is included in
"plugin:vue/strongly-recommended"and"plugin:vue/recommended". - 🔧 The
--fixoption 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": []
}]
}
Default casing is set to always with ['data-', 'aria-', 'slot-scope'] set to be ignored
"always"(default) ... Use hyphenated name."never"... Don't use hyphenated name exceptdata-,aria-andslot-scope."ignore"... Array of ignored names
"always"
It errors on upper case letters.
<template>
<!-- ✔ GOOD -->
<MyComponent my-prop="prop" />
<!-- ✘ BAD -->
<MyComponent myProp="prop" />
</template>
"never"
It errors on hyphens except data-, aria- and slot-scope.
<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>