JS.VUE.MAX.ATTRIBUTES.PER.LINE

Limits the maximum number of attributes/properties per line to improve readability.

Rule Details

This rule aims to enforce a number of attributes per line in templates. It checks all the elements in a template and verifies that the number of attributes per line does not exceed the defined maximum. An attribute is considered to be in a new line when there is a line break between two attributes.

There is a configurable number of attributes that are acceptable in one-line case (default 1), as well as how many attributes are acceptable per line in multi-line case (default 1).

{'vue/max-attributes-per-line': ['error']}

<template>
  <!-- GOOD -->
  <MyComponent lorem="1"/>
  <MyComponent
    lorem="1"
    ipsum="2"
  />
  <MyComponent
    lorem="1"
    ipsum="2"
    dolor="3"
  />

  <!-- BAD -->
  <MyComponent lorem="1" ipsum="2"/>
  <MyComponent
    lorem="1" ipsum="2"
  />
  <MyComponent
    lorem="1" ipsum="2"
    dolor="3"
  />
</template>

Options

{
  "vue/max-attributes-per-line": ["error", {
    "singleline": {
      "max": 1
    },      
    "multiline": {
      "max": 1
    }
  }]
}

• singleline.max (number) ... The number of maximum attributes per line when the opening tag is in a single line. Default is 1. This can be { singleline: 1 } instead of { singleline: { max: 1 }}.
• multiline.max (number) ... The max number of attributes per line when the opening tag is in multiple lines. Default is 1. This can be { multiline: 1 } instead of { multiline: { max: 1 }}.

"singleline": 3

{'vue/max-attributes-per-line': ['error', {singleline: 3}]}

<template>
  <!-- GOOD -->
  <MyComponent lorem="1" ipsum="2" dolor="3" />

  <!-- BAD -->
  <MyComponent lorem="1" ipsum="2" dolor="3" sit="4" />
</template>

"multiline": 2

{'vue/max-attributes-per-line': ['error', {multiline: 2}]}

<template>
  <!-- GOOD -->
  <MyComponent
    lorem="1" ipsum="2"
    dolor="3"
  />

  <!-- BAD -->
  <MyComponent
    lorem="1" ipsum="2" dolor="3"
    sit="4"
  />
</template>

Further Reading

• Style guide - Multi attribute elements (https://vuejs.org/style-guide/rules-strongly-recommended.html#multi-attribute-elements)