pageClass | sidebarDepth | title | description | since |
---|---|---|---|---|
rule-details |
0 |
vue/attribute-hyphenation |
enforce attribute naming style on custom components in template |
v3.9.0 |
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
--fix
option on the command line can automatically fix some of the problems reported by this rule.
This rule enforces using hyphenated attribute names on custom components in Vue templates.
<template>
<!-- ✓ GOOD -->
<MyComponent my-prop="prop" />
<!-- ✗ BAD -->
<MyComponent myProp="prop" />
</template>
{
"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
It errors on upper case letters.
<template>
<!-- ✓ GOOD -->
<MyComponent my-prop="prop" />
<!-- ✗ BAD -->
<MyComponent myProp="prop" />
</template>
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>
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>
This rule was introduced in eslint-plugin-vue v3.9.0