JS.VUE.ATTRIBUTE.HYPHENATION

Rule Details

This rule enforces using hyphenated attribute names on custom components in Vue templates.

{'vue/attribute-hyphenation': ['error', 'always']}

<template>
  <!-- GOOD -->
  <MyComponent my-prop="prop" />

  <!-- BAD -->
  <MyComponent myProp="prop" />
</template>

Options

{
  "vue/attribute-hyphenation": ["error", "always" | "never", {
    "ignore": []
  }]
}

Default casing is set to always. By default the following attributes are ignored: data-, aria-, slot-scope, and all the SVG attributes (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) with either an upper case letter or an hyphen.

• "always" (default) ... Use hyphenated name.
• "never" ... Don't use hyphenated name except the ones that are ignored.
• "ignore" ... Array of ignored names

"always"

It errors on upper case letters.

{'vue/attribute-hyphenation': ['error', 'always']}

<template>
  <!-- GOOD -->
  <MyComponent my-prop="prop" />

  <!-- BAD -->
  <MyComponent myProp="prop" />
</template>

"never"

It errors on hyphens except on the attributes in the ignored attributes list.

{'vue/attribute-hyphenation': ['error', 'never']}

<template>
  <!-- GOOD -->
  <MyComponent myProp="prop" />
  <MyComponent data-id="prop" />
  <MyComponent aria-role="button" />
  <MyComponent slot-scope="prop" />

  <!-- BAD -->
  <MyComponent my-prop="prop" />
</template>

"never", { "ignore": ["custom-prop"] }

Don't use hyphenated name but allow custom attributes

{'vue/attribute-hyphenation': ['error', 'never', { ignore: ['custom-prop']}]}

<template>
  <!-- GOOD -->
  <MyComponent myProp="prop" />
  <MyComponent custom-prop="prop" />
  <MyComponent data-id="prop" />
  <MyComponent aria-role="button" />
  <MyComponent slot-scope="prop" />

  <!-- BAD -->
  <MyComponent my-prop="prop" />
</template>