useVueHyphenatedAttributes

HTML

Summary

Rule available since: v2.3.6
Diagnostic Category: lint/style/useVueHyphenatedAttributes
This rule is recommended, meaning it is enabled by default.
This rule has an unsafe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/attribute-hyphenation

How to configure

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

Description

Enforce hyphenated (kebab-case) attribute names in Vue templates.

Vue style guide recommends using hyphenated attribute (and prop) names in templates to keep them consistent and distinguish them from JavaScript identifiers written in camelCase/PascalCase.

This rule flags attributes that are detected as camelCase, PascalCase, CONSTANT_CASE, snake_case or that contain any uppercase ASCII letter. It uses Biome’s internal Case::identify helper.

Allowed:

kebab-case attributes (e.g. data-test-id)
pure lowercase single word attributes (e.g. class, id)

Examples

Invalid

1
<div fooBar="x"></div>

code-block.vue:1:6 lint/style/useVueHyphenatedAttributes  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Attribute fooBar should be hyphenated (kebab-case).
  
  > 1 │ <div fooBar=“x”></div>
      │      ^^^^^^^^^^
    2 │ 
  
  ℹ The Vue style guide recommends using hyphenated attribute (and prop) names in templates to keep them consistent.
  
  ℹ Unsafe fix: Rename the attribute to foo-bar.
  
    1   │ - <div·fooBar=“x”></div>
      1 │ + <div·foo-bar=“x”></div>
    2 2 │

1
<MyComp :someProp="x" />

code-block.vue:1:9 lint/style/useVueHyphenatedAttributes  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Attribute someProp should be hyphenated (kebab-case).
  
  > 1 │ <MyComp :someProp=“x” />
      │         ^^^^^^^^^^^^^
    2 │ 
  
  ℹ The Vue style guide recommends using hyphenated attribute (and prop) names in templates to keep them consistent.
  
  ℹ Unsafe fix: Rename the attribute to some-prop.
  
    1   │ - <MyComp·:someProp=“x”·/>
      1 │ + <MyComp·:some-prop=“x”·/>
    2 2 │

Valid

1
<div data-test-id="x"></div>
2
<div class="foo"></div>
3
<MyComp :some-prop="x" />

Options

The rule supports the following options:

`ignore`

A list of attribute names that should be ignored by the rule (they won’t be required to be hyphenated). Use this when you have a fixed set of camelCase / PascalCase prop names you intentionally allow.

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useVueHyphenatedAttributes": {
6
          "level": "on",
7
          "options": {
8
            "ignore": [
9
              "someProp",
10
              "fooBar"
11
            ]
12
          }
13
        }
14
      }
15
    }
16
  }
17
}

Valid (using `ignore`)

1
<div fooBar="x"></div>

`ignoreTags`

A list of tag names whose attributes should be skipped entirely. This is useful for third-party or internal components that deliberately expose non‑hyphenated prop names.

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useVueHyphenatedAttributes": {
6
          "level": "on",
7
          "options": {
8
            "ignoreTags": [
9
              "MyComp",
10
              "AnotherWidget"
11
            ]
12
          }
13
        }
14
      }
15
    }
16
  }
17
}

Valid (using `ignoreTags`)

1
<MyComp :someProp="x" />