# 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. By default the following attributes are ignored: data-, aria-, slot-scope,
and all the SVG attributes (opens new window) with either an upper case letter or an hyphen.
"always"(default) ... Use hyphenated name."never"... Don't use hyphenated name except the ones that are ignored."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 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>
# 👫 Related Rules
# 🚀 Version
This rule was introduced in eslint-plugin-vue v3.9.0