vue/no-duplicate-attributes
disallow duplication of attributes
- ⚙️ This rule is included in all of
"plugin:vue/essential"
,*.configs["flat/essential"]
,"plugin:vue/vue2-essential"
,*.configs["flat/vue2-essential"]
,"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"]
.
When there are multiple attributes with the same name on a component, only the last one is used and the rest are ignored, so this is usually a mistake.
📖 Rule Details
This rule reports duplicate attributes. v-bind:foo
directives are handled as the attribute foo
.
<template>
<!-- ✓ GOOD -->
<MyComponent :foo="abc" />
<MyComponent foo="abc" />
<MyComponent class="abc" :class="def" />
<!-- ✗ BAD -->
<MyComponent :foo="abc" foo="def" />
<MyComponent foo="abc" :foo="def" />
<MyComponent foo="abc" foo="def" />
<MyComponent :foo.a="abc" :foo.b="def" />
<MyComponent class="abc" class="def" />
</template>
🔧 Options
json
{
"vue/no-duplicate-attributes": ["error", {
"allowCoexistClass": true,
"allowCoexistStyle": true
}]
}
allowCoexistClass
(boolean
) ... Enablesv-bind:class
directive can coexist with the plainclass
attribute. Default istrue
.allowCoexistStyle
(boolean
) ... Enablesv-bind:style
directive can coexist with the plainstyle
attribute. Default istrue
.
"allowCoexistClass": false, "allowCoexistStyle": false
<template>
<!-- ✗ BAD -->
<MyComponent class="abc" :class="def" />
<MyComponent style="abc" :style="def" />
</template>
🚀 Version
This rule was introduced in eslint-plugin-vue v3.0.0