feat: add fade transition

src/layouts/default.vue

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

src/styles/main.css

@@ -25,3 +25,13 @@ body,
   width: 100%;
   height: 2px;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}