vue/max-template-depth

enforce maximum depth of template.

Applies to: Vue SFC templates and blocks, with script context where the rule requires it.

Bad

The span is nested deeper than the configured maximum.

<template>
  <div>
    <section>
      <div>
        <span>deep</span>
      </div>
    </section>
  </div>
</template>

Good

The template has a single element.

<template>
  <p>ok</p>
</template>

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({}).withVue({
  linter: {
    "preset": "incremental",
    "rules": {
      "vue/max-template-depth": "warn"
    },
    "ruleOptions": {
      "vue/max-template-depth": {
        "maxDepth": 3
      }
    }
  },
});

Then run vp run lint.

Related

• Vue rules
• All rules
• Source code