JS.VUE.FIRST.ATTRIBUTE.LINEBREAK

Rule Details

This rule aims to enforce a consistent location for the first attribute.

{'vue/first-attribute-linebreak': ['error']}

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

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

Options

{
  "vue/first-attribute-linebreak": ["error", {
    "singleline": "ignore",
    "multiline": "below"
  }]
}

• singleline ... The location of the first attribute when the attributes on single line. Default is "ignore".
• "below" ... Requires a newline before the first attribute.
• "beside" ... Disallows a newline before the first attribute.
• "ignore" ... Ignores attribute checking.
• multiline ... The location of the first attribute when the attributes span multiple lines. Default is "below".
• "below" ... Requires a newline before the first attribute.
• "beside" ... Disallows a newline before the first attribute.
• "ignore" ... Ignores attribute checking.

"singleline": "beside"

{'vue/first-attribute-linebreak': ['error', {singleline: 'beside'}]}

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

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

"singleline": "below"

{'vue/first-attribute-linebreak': ['error', {singleline: 'below'}]}

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

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

"multiline": "beside"

{'vue/first-attribute-linebreak': ['error', {multiline: 'beside'}]}

<template>
  <!-- GOOD -->
  <MyComponent lorem="1"
               ipsum="2"/>
  <MyComponent :lorem="{
                 a: 1
               }"/>

  <!-- BAD -->
  <MyComponent
    lorem="1"
    ipsum="2"/>
  <MyComponent
    :lorem="{
      a: 1
    }"/>
</template>

"multiline": "below"

{'vue/first-attribute-linebreak': ['error', {multiline: 'below'}]}

<template>
  <!-- GOOD -->
  <MyComponent
    lorem="1"
    ipsum="2"/>
  <MyComponent
    :lorem="{
      a: 1
    }"/>

  <!-- BAD -->
  <MyComponent lorem="1"
               ipsum="2"/>
  <MyComponent :lorem="{
                 a: 1
               }"/>
</template>

Further Reading

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