Each attribute of a Vue element should be unique

  • VUE_DUPLICATE_ATTRIBUTE
  • Error
  • High, Medium
  • vue

This rule applies when a Vue element has multiple attributes with the same name.

If an element has duplicate attributes, Vue may throw a compile error. Even when no error occurs, only one of the attributes is used, which can lead to unintended behavior because values specified at others are ignored.

Noncompliant Code Example

View with compliant examples side by side
<template>
  <!-- VUE_DUPLICATE_ATTRIBUTE alarm -->
  <person
    :name="userName"
    name="Bob"
  />
</template>

<script>
export default {
  props: ["name"],
  computed: {
    userName: function () {
      return this.name || "anonymous";
    }
  },
  components: {
    person: {
      props: ['name'],
      template: "<div>name: {{ name }}</div>"
    }
  }
};
</script>

Compliant Code Example

View with noncompliant examples side by side
<template>
  <person
    :name="userName"
  />
</template>

<script>
export default {
  props: ["name"],
  computed: {
    userName: function () {
      return this.name || "anonymous";
    }
  },
  components: {
    person: {
      props: ['name'],
      template: "<div>name: {{ name }}</div>"
    }
  }
};
</script>

Version

This rule was introduced in DeepScan 1.14.0-beta.