1---
2title: RouterView Transitions Always Apply Despite Missing appear Prop
3impact: LOW
4impactDescription: Initial page load with RouterView triggers transition animation even without the appear prop due to async navigation
5type: gotcha
6tags: [vue3, transition, vue-router, appear, initial-load, navigation]
7---
8 
9# RouterView Transitions Always Apply Despite Missing appear Prop
10 
11**Impact: LOW** - When using `<Transition>` with Vue Router's `<RouterView>`, the enter transition animation runs on initial page load even if you haven't added the `appear` prop. This differs from normal Transition behavior where `appear` is required for initial render animations. This happens because Vue Router's navigations are asynchronous, causing the component to mount after the initial render.
12 
13## Task Checklist
14 
15- [ ] Be aware that RouterView transitions always animate on initial load
16- [ ] If you want NO animation on initial load, you need to handle this explicitly
17- [ ] Don't add `appear` prop expecting it to change behavior - it's already effectively enabled
18- [ ] Consider whether initial animation is desired for your UX
19 
20**Expected Behavior (Normal Transition):**
21```vue
22<template>
23  <!-- Without appear: No animation on initial render -->
24  <Transition name="fade">
25    <div v-if="show">Content</div>
26  </Transition>
27 
28  <!-- With appear: Animates on initial render -->
29  <Transition name="fade" appear>
30    <div v-if="show">Content</div>
31  </Transition>
32</template>
33```
34 
35**RouterView Behavior (Different!):**
36```vue
37<template>
38  <!-- RouterView transitions ALWAYS animate on initial load -->
39  <!-- The appear prop has no effect here -->
40  <RouterView v-slot="{ Component }">
41    <Transition name="fade">
42      <component :is="Component" />
43    </Transition>
44  </RouterView>
45</template>
46 
47<!--
48On initial page load:
491. Vue renders the app
502. Router resolves the route (async)
513. Component mounts AFTER initial render
524. Enter transition triggers (as if toggled from v-if="false" to v-if="true")
53-->
54```
55 
56## Why This Happens
57 
58Vue Router navigations are asynchronous. The sequence is:
59 
601. Vue application mounts with empty RouterView
612. Router resolves the initial route
623. Route component is inserted into RouterView
634. This insertion triggers the enter transition
64 
65Since the component wasn't present in the initial render and is "inserted" afterward, Vue treats it as a normal enter transition, not an initial render.
66 
67## If You Want to Disable Initial Animation
68 
69```vue
70<template>
71  <RouterView v-slot="{ Component }">
72    <Transition :name="isInitialLoad ? '' : 'fade'" mode="out-in">
73      <component :is="Component" />
74    </Transition>
75  </RouterView>
76</template>
77 
78<script setup>
79import { ref, onMounted } from 'vue'
80import { useRouter } from 'vue-router'
81 
82const isInitialLoad = ref(true)
83const router = useRouter()
84 
85// After first navigation completes, enable transitions
86router.isReady().then(() => {
87  // Small delay to ensure initial render is complete
88  setTimeout(() => {
89    isInitialLoad.value = false
90  }, 0)
91})
92</script>
93```
94 
95## Alternative: Use CSS to Skip First Animation
96 
97```vue
98<template>
99  <RouterView v-slot="{ Component }">
100    <Transition name="fade" mode="out-in">
101      <component :is="Component" :class="{ 'skip-initial': isInitialLoad }" />
102    </Transition>
103  </RouterView>
104</template>
105 
106<script setup>
107import { ref } from 'vue'
108import { useRouter } from 'vue-router'
109 
110const isInitialLoad = ref(true)
111const router = useRouter()
112 
113router.isReady().then(() => {
114  isInitialLoad.value = false
115})
116</script>
117 
118<style>
119.fade-enter-active,
120.fade-leave-active {
121  transition: opacity 0.3s ease;
122}
123 
124.fade-enter-from,
125.fade-leave-to {
126  opacity: 0;
127}
128 
129/* Skip animation on initial load */
130.skip-initial.fade-enter-active {
131  transition: none;
132}
133</style>
134```
135 
136## Standard RouterView Transition Pattern
137 
138If you're fine with initial animation (often desired), use the standard pattern:
139 
140```vue
141<template>
142  <RouterView v-slot="{ Component, route }">
143    <Transition :name="route.meta.transition || 'fade'" mode="out-in">
144      <component :is="Component" :key="route.path" />
145    </Transition>
146  </RouterView>
147</template>
148 
149<style>
150.fade-enter-active,
151.fade-leave-active {
152  transition: opacity 0.3s ease;
153}
154 
155.fade-enter-from,
156.fade-leave-to {
157  opacity: 0;
158}
159 
160/* Route-specific transitions via meta */
161.slide-enter-active,
162.slide-leave-active {
163  transition: transform 0.3s ease;
164}
165 
166.slide-enter-from {
167  transform: translateX(100%);
168}
169 
170.slide-leave-to {
171  transform: translateX(-100%);
172}
173</style>
174```
175 
176```javascript
177// router.js
178const routes = [
179  {
180    path: '/',
181    component: Home
182  },
183  {
184    path: '/about',
185    component: About,
186    meta: { transition: 'slide' }  // Custom transition for this route
187  }
188]
189```
190 
191## Reference
192- [Vue Router Transitions](https://router.vuejs.org/guide/advanced/transitions.html)
193- [Vue.js Transition appear](https://vuejs.org/guide/built-ins/transition.html#transition-on-appear)
194