Add page and layout transitions

app.vue

@@ -16,3 +16,29 @@ useHead({
   }
 });
 </script>
+
+<style>
+.page-slide-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.page-slide-leave-active {
+  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.page-slide-enter-from,
+.page-slide-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
+.layout-fade-enter-active,
+.layout-fade-leave-active {
+  transition: all 0.4s;
+}
+.layout-fade-enter-from,
+.layout-fade-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+</style>

nuxt.config.ts

@@ -20,6 +20,16 @@ export default defineNuxtConfig({
     '@nuxtjs/turnstile',
     'nuxt-rate-limit'
   ],
+  app: {
+    pageTransition: {
+      name: 'page-slide',
+      mode: 'out-in'
+    },
+    layoutTransition: {
+      name: 'layout-fade',
+      mode: 'out-in'
+    }
+  },
   turnstile: {
     siteKey: '0x4AAAAAAAS0Q9wK8FOqKxCF'
   },

pages/index.vue

@@ -7,7 +7,10 @@
 </template>
 <script setup lang="ts">
 definePageMeta({
-  layout: false
+  layout: false,
+  layoutTransition: {
+    name: 'layout-fade'
+  }
 });
 
 useServerSeoMeta({