Big v-if

Checks if the template has a v-if with more than 10 lines (warning) or 20 lines (error). Big v-if can be moved out to its own component.

👉 Checkout this article The Extract Conditional Pattern in Vue by Michael Thiessen

❓ Why it's good to follow this rule?

• Readability: Big v-if can be hard to read and understand.
• Maintainability: Big v-if can be hard to maintain.
• Testability: Big v-if can be hard to test.

😱 Examples of code for which this rule will throw a warning

WARNING

The following code contains a big v-if with 14 lines.

<template>
  <div v-if="!isReady">
    Processing <span>data</span>
    <table>
      <thead>
        <tr>
          <th>data</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items">
          <td>{{ item }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

🤩 How to fix it?

TIP

Move out the v-if block to its own component.

<template>
  <ItemsTable v-if="!isReady" :data="items" />
</template>

🛠 How to override?

The default max v-if lines for this rule is 10.

You can override through the new override option in .config/vue-mess-detector.json ⬇️

{
  "override": {
    "maxVifLines": 20
  }
}