useVueHyphenatedAttributes (HTML)

Language 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

Disallow uppercase letters in Vue template attribute names.

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.

Like the upstream ESLint rule, this rule flags attribute names that contain uppercase letters. It doesn’t require exact kebab-case, so punctuation such as colons and underscores is allowed.

Allowed:

names without uppercase letters (e.g. data-test-id, pt:header:id, some_attr)

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" />
4
<MyComp pt:header:data-test-id="x" />

Options

The rule supports the following options:

`ignore`

A list of attribute names that should be exempt from the uppercase-letter check. 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 exempt from the uppercase-letter check. This is useful for third-party or internal components that deliberately expose camelCase or PascalCase 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" />