add page transitions

assets/scss/_global.scss

@@ -28,3 +28,15 @@ body {
   -webkit-clip-path: inset(50%) !important;
   clip-path: inset(50%) !important; /* 2 */
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition-timing-function: ease;
+  transition-duration: 0.3s;
+  transition-property: opacity;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}

layouts/default.vue

@@ -2,7 +2,9 @@
   <div :class="{ 'open-nav': navActive }">
     <TopNav :active="navActive" @toggle="toggleNav" />
     <main class="main">
-      <Nuxt />
+      <transition name="fade" mode="out-in">
+        <Nuxt />
+      </transition>
     </main>
     <FollowEvent />
     <Footer />