JS.VUE.MULTILINE.HTML.ELEMENT.CONTENT.NEWLINE

Rule Details

This rule enforces a line break before and after the contents of a multiline element.

{'vue/multiline-html-element-content-newline': ['error']}

<template>
  <!-- GOOD -->
  <div>
    multiline
    content
  </div>

  <pre>some
  content</pre>

  <div
    attr
  >
    multiline start tag
  </div>

  <table>
    <tr>
      <td>multiline</td>
      <td>children</td>
    </tr>
  </table>

  <div>
    <!-- multiline
         comment -->
  </div>

  <div
  >
  </div>

  <div attr>singleline element</div>

  <!-- BAD -->
  <div>multiline
    content</div>

  <div
    attr
  >multiline start tag</div>

  <table><tr><td>multiline</td>
    <td>children</td></tr></table>

  <div><!-- multiline
    comment --></div>

  <div
  ></div>
</template>

Options

{
    "vue/multiline-html-element-content-newline": ["error", {
        "ignoreWhenEmpty": true,
        "ignores": ["pre", "textarea", ...INLINE_ELEMENTS],
        "allowEmptyLines": false
    }]
}

• ignoreWhenEmpty ... disables reporting when element has no content. default true
• ignores ... the configuration for element names to ignore line breaks style. default ["pre", "textarea", ...INLINE_ELEMENTS].
• allowEmptyLines ... if true, it allows empty lines around content. If you want to disallow multiple empty lines, use no-multiple-empty-lines in combination.
  default false

All inline non void elements can be found here (https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/inline-non-void-elements.json).

"ignores": ["VueComponent", "pre", "textarea"]

{'vue/multiline-html-element-content-newline': ['error', { ignores: ['VueComponent', 'pre', 'textarea'] }]}

<template>
  <!-- GOOD -->
  <VueComponent>multiline
  content</VueComponent>

  <pre>some
  content</pre>

  <VueComponent><span
    class="bold">For example,</span>
  Defines the Vue component that accepts preformatted text.</VueComponent>
</template>

"allowEmptyLines": true

{'vue/multiline-html-element-content-newline': ['error', { allowEmptyLines: true }]}

<template>
  <!-- GOOD -->
  <div>
    content
  </div>
  <div>

    content

  </div>

  <!-- BAD -->
  <div>content
    content</div>
</template>

Further Reading

• https://eslint.org/docs/rules/no-multiple-empty-lines