# vue/attribute-hyphenation
enforce attribute naming style on custom components in template
- ⚙️ This rule is included in all of
"plugin:vue/vue3-strongly-recommended","plugin:vue/strongly-recommended","plugin:vue/vue3-recommended"and"plugin:vue/recommended". - 🔧 The
--fixoption on the command line (opens new window) 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>
# 👫 Related Rules
# 🚀 Version
This rule was introduced in eslint-plugin-vue v3.9.0