useVueValidAttributeName (HTML)

Language HTML

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useVueValidAttributeName
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/valid-attribute-name

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueValidAttributeName": "error"
6
      }
7
    }
8
  }
9
}

Description

Require valid attribute names in Vue templates.

An attribute name must start with a letter, an underscore (_), or a colon (:). The rest of the name can only contain letters, digits, hyphens (-), underscores, periods (.), and colons. Names such as 0abc or -def break these rules. Vue sets attributes from JavaScript when it renders a template, and browsers can throw an error when asked to set an attribute with an invalid name.

The rule checks plain attributes, such as <p foo>, and the names bound with v-bind, such as <p v-bind:foo="value"> or <p :foo="value">. Dynamic names, such as <p :[name]="value">, aren’t checked because their value is only known when the template runs.

Attributes on components, such as <MyComponent 0abc="value">, aren’t checked either, because Vue passes them to the component as props instead of setting them on an HTML element.

Examples

Invalid

1
<template>
2
  <p 0abc></p>
3
</template>

code-block.vue:2:6 lint/nursery/useVueValidAttributeName ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The attribute name 0abc isn't valid.
  
    1 │ <template>
  > 2 │   <p 0abc></p>
      │      ^^^^
    3 │ </template>
    4 │ 
  
  ℹ Browsers can throw an error when Vue sets an attribute with an invalid name.
  
  ℹ Start the name with a letter, an underscore, or a colon, and use only letters, digits, hyphens, underscores, periods, and colons after it.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<template>
2
  <p -def></p>
3
</template>

code-block.vue:2:6 lint/nursery/useVueValidAttributeName ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The attribute name -def isn't valid.
  
    1 │ <template>
  > 2 │   <p -def></p>
      │      ^^^^
    3 │ </template>
    4 │ 
  
  ℹ Browsers can throw an error when Vue sets an attribute with an invalid name.
  
  ℹ Start the name with a letter, an underscore, or a colon, and use only letters, digits, hyphens, underscores, periods, and colons after it.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<template>
2
  <p v-bind:0abc="value"></p>
3
</template>

code-block.vue:2:13 lint/nursery/useVueValidAttributeName ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The attribute name 0abc isn't valid.
  
    1 │ <template>
  > 2 │   <p v-bind:0abc="value"></p>
      │             ^^^^
    3 │ </template>
    4 │ 
  
  ℹ Browsers can throw an error when Vue sets an attribute with an invalid name.
  
  ℹ Start the name with a letter, an underscore, or a colon, and use only letters, digits, hyphens, underscores, periods, and colons after it.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<template>
2
  <p :0abc="value"></p>
3
</template>

code-block.vue:2:7 lint/nursery/useVueValidAttributeName ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The attribute name 0abc isn't valid.
  
    1 │ <template>
  > 2 │   <p :0abc="value"></p>
      │       ^^^^
    3 │ </template>
    4 │ 
  
  ℹ Browsers can throw an error when Vue sets an attribute with an invalid name.
  
  ℹ Start the name with a letter, an underscore, or a colon, and use only letters, digits, hyphens, underscores, periods, and colons after it.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<template>
2
  <p foo></p>
3
  <p foo-bar="value"></p>
4
  <p _foo-bar></p>
5
  <p :foo-bar="value"></p>
6
  <p :[name]="value"></p>
7
  <MyComponent 0abc="value" />
8
  <MyComponent :0abc="value" />
9
</template>