pref: fix fade transition

src/layouts/default.vue

@@ -2,14 +2,14 @@
   <v-app class="flex flex-col">
     <Nav />
 
-    <v-main style="--v-layout-top: 25px;--v-layout-bottom: 70px;">
+    <div style="--v-layout-top: 25px;--v-layout-bottom: 70px;">
-      <div class="prose max-w-110ch m-auto p-3">
+      <router-view v-slot="{ Component, route }">
-        <router-view v-slot="{ Component, route }">
+        <transition name="fade" mode="out-in">
-          <transition name="fade">
+          <div :key="route.path" class="prose max-w-110ch m-auto p-3">
-            <component :is="Component" :key="route.path" />
+            <component :is="Component" />
-          </transition>
+          </div>
-        </router-view>
+        </transition>
-      </div>
+      </router-view>
-    </v-main>
+    </div>
   </v-app>
 </template>

src/layouts/index.vue

@@ -3,9 +3,9 @@
     <Nav />
 
     <div style="--v-layout-top: 25px" class="m-auto">
-      <router-view v-slot="{ Component }">
+      <router-view v-slot="{ Component, route }">
-        <transition name="fade">
+        <transition name="fade" mode="out-in">
-          <div class="">
+          <div :key="route.path" class="prose max-w-110ch m-auto p-3">
             <component :is="Component" />
           </div>
         </transition>

src/styles/main.css

@@ -28,7 +28,7 @@ body,
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.5s ease;
+  transition: opacity 0.3s ease;
 }
 
 .fade-enter-from,