v-else Must Immediately Follow v-if or v-else-if

Impact: MEDIUM - A v-else or v-else-if element must immediately follow a v-if or v-else-if element in the DOM. If there's any element in between:

SFC compilation (Vite/vue-loader): Vue throws a compile-time SyntaxError - the code won't build at all
Runtime template compilation: The element renders unconditionally (always visible), losing its conditional behavior

In most modern Vue projects using Single File Components, this is caught at build time.

Task Checklist

Place v-else immediately after the v-if element (no elements in between)
Place v-else-if immediately after v-if or another v-else-if
Use <template> wrapper if you need to group multiple elements within a branch
If you need content between conditions, restructure using nested conditionals or computed

Incorrect:

<!-- WRONG: v-else not immediately after v-if -->
<template>
  <div v-if="isLoggedIn">
    Welcome back!
  </div>

  <p>Some other content in between</p>

  <div v-else>
    <!-- This v-else is NOT recognized! It will ALWAYS render (unconditionally) -->
    Please log in
  </div>
</template>

<!-- WRONG: Comment or whitespace element between -->
<template>
  <span v-if="status === 'loading'">Loading...</span>
  <!-- This comment breaks the chain! -->
  <span v-else-if="status === 'error'">Error occurred</span>
  <span v-else>Done</span>
</template>

<!-- WRONG: Text node between conditions -->
<template>
  <div v-if="showA">A</div>
  Just some text here
  <div v-else>B</div>  <!-- Not recognized, always renders -->
</template>

Correct:

<!-- CORRECT: v-else immediately follows v-if -->
<template>
  <div v-if="isLoggedIn">
    Welcome back!
  </div>
  <div v-else>
    Please log in
  </div>

  <p>Some other content (placed after the conditional block)</p>
</template>

<!-- CORRECT: Full v-if/v-else-if/v-else chain -->
<template>
  <span v-if="status === 'loading'">Loading...</span>
  <span v-else-if="status === 'error'">Error: {{ errorMessage }}</span>
  <span v-else-if="status === 'empty'">No data found</span>
  <span v-else>{{ data }}</span>
</template>

<!-- CORRECT: Using <template> for multiple elements per branch -->
<template>
  <template v-if="isLoggedIn">
    <h1>Welcome back!</h1>
    <p>Your dashboard</p>
    <UserStats />
  </template>
  <template v-else>
    <h1>Please log in</h1>
    <LoginForm />
  </template>
</template>

<!-- CORRECT: Restructure if you need content between conditions -->
<template>
  <div class="conditional-section">
    <div v-if="isLoggedIn">Welcome back!</div>
    <div v-else>Please log in</div>
  </div>

  <div class="always-shown">
    Some other content
  </div>

  <div class="another-conditional">
    <div v-if="showMore">More info</div>
    <div v-else>Click to expand</div>
  </div>
</template>

Debugging Tips

<!-- If v-else is always visible (rendering unconditionally), check for: -->

<!-- 1. Elements between v-if and v-else -->
<!-- 2. HTML comments that break the chain -->
<!-- 3. Text nodes (including whitespace in some cases) -->
<!-- 4. Component tags that render content between -->

<!-- SFC compilation throws: "v-else/v-else-if has no adjacent v-if or v-else-if" (build fails) -->
<!-- Runtime template compilation shows a warning but renders the element unconditionally -->
<!-- Vue DevTools will show the v-else element as not part of the condition chain -->

Reference

Vue.js Conditional Rendering - v-else

3.9 KiB Raw Blame History

v-else Must Immediately Follow v-if or v-else-if

Task Checklist

Debugging Tips

Reference

3.9 KiB

Raw Blame History