1---
2title: v-else Must Immediately Follow v-if or v-else-if
3impact: MEDIUM
4impactDescription: Misplaced v-else causes a compile-time error in SFCs, or renders unconditionally with runtime template compilation
5type: capability
6tags: [vue3, conditional-rendering, v-if, v-else, v-else-if]
7---
8 
9# v-else Must Immediately Follow v-if or v-else-if
10 
11**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:
12 
13- **SFC compilation (Vite/vue-loader):** Vue throws a **compile-time SyntaxError** - the code won't build at all
14- **Runtime template compilation:** The element renders unconditionally (always visible), losing its conditional behavior
15 
16In most modern Vue projects using Single File Components, this is caught at build time.
17 
18## Task Checklist
19 
20- [ ] Place v-else immediately after the v-if element (no elements in between)
21- [ ] Place v-else-if immediately after v-if or another v-else-if
22- [ ] Use `<template>` wrapper if you need to group multiple elements within a branch
23- [ ] If you need content between conditions, restructure using nested conditionals or computed
24 
25**Incorrect:**
26```html
27<!-- WRONG: v-else not immediately after v-if -->
28<template>
29  <div v-if="isLoggedIn">
30    Welcome back!
31  </div>
32 
33  <p>Some other content in between</p>
34 
35  <div v-else>
36    <!-- This v-else is NOT recognized! It will ALWAYS render (unconditionally) -->
37    Please log in
38  </div>
39</template>
40```
41 
42```html
43<!-- WRONG: Comment or whitespace element between -->
44<template>
45  <span v-if="status === 'loading'">Loading...</span>
46  <!-- This comment breaks the chain! -->
47  <span v-else-if="status === 'error'">Error occurred</span>
48  <span v-else>Done</span>
49</template>
50```
51 
52```html
53<!-- WRONG: Text node between conditions -->
54<template>
55  <div v-if="showA">A</div>
56  Just some text here
57  <div v-else>B</div>  <!-- Not recognized, always renders -->
58</template>
59```
60 
61**Correct:**
62```html
63<!-- CORRECT: v-else immediately follows v-if -->
64<template>
65  <div v-if="isLoggedIn">
66    Welcome back!
67  </div>
68  <div v-else>
69    Please log in
70  </div>
71 
72  <p>Some other content (placed after the conditional block)</p>
73</template>
74```
75 
76```html
77<!-- CORRECT: Full v-if/v-else-if/v-else chain -->
78<template>
79  <span v-if="status === 'loading'">Loading...</span>
80  <span v-else-if="status === 'error'">Error: {{ errorMessage }}</span>
81  <span v-else-if="status === 'empty'">No data found</span>
82  <span v-else>{{ data }}</span>
83</template>
84```
85 
86```html
87<!-- CORRECT: Using <template> for multiple elements per branch -->
88<template>
89  <template v-if="isLoggedIn">
90    <h1>Welcome back!</h1>
91    <p>Your dashboard</p>
92    <UserStats />
93  </template>
94  <template v-else>
95    <h1>Please log in</h1>
96    <LoginForm />
97  </template>
98</template>
99```
100 
101```html
102<!-- CORRECT: Restructure if you need content between conditions -->
103<template>
104  <div class="conditional-section">
105    <div v-if="isLoggedIn">Welcome back!</div>
106    <div v-else>Please log in</div>
107  </div>
108 
109  <div class="always-shown">
110    Some other content
111  </div>
112 
113  <div class="another-conditional">
114    <div v-if="showMore">More info</div>
115    <div v-else>Click to expand</div>
116  </div>
117</template>
118```
119 
120## Debugging Tips
121 
122```html
123<!-- If v-else is always visible (rendering unconditionally), check for: -->
124 
125<!-- 1. Elements between v-if and v-else -->
126<!-- 2. HTML comments that break the chain -->
127<!-- 3. Text nodes (including whitespace in some cases) -->
128<!-- 4. Component tags that render content between -->
129 
130<!-- SFC compilation throws: "v-else/v-else-if has no adjacent v-if or v-else-if" (build fails) -->
131<!-- Runtime template compilation shows a warning but renders the element unconditionally -->
132<!-- Vue DevTools will show the v-else element as not part of the condition chain -->
133```
134 
135## Reference
136- [Vue.js Conditional Rendering - v-else](https://vuejs.org/guide/essentials/conditional.html#v-else)
137