max-template-depth.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/max-template-depth	enforce maximum depth of template

vue/max-template-depth

enforce maximum depth of template

• ❗ This rule has not been released yet.

📖 Rule Details

This rule enforces a maximum depth of the template in a Vue SFC, in order to aid in maintainability and reduce complexity.

🔧 Options

This rule takes an object, where you can specify the maximum depth allowed in a Vue SFC template block. There is one property that can be specified for the object.

• maxDepth ... Specify the maximum template depth template block.

{ maxDepth: 3 }

<!-- ✗ BAD -->
<template>
  <main-container>
    <child-component>
      <div />
    </child-component>
    <child-component>
      <nested-component>
        <div>
          <div />
        </div>
      </nested-component>
    </child-component>
  </main-container>
</template>

<!-- ✓ GOOD -->
<template>
  <main-container>
    <child-component>
      <div />
    </child-component>
  </main-container>
</template>

🔍 Implementation

• Rule source
• Test source