Add page transitions

frontend/nuxt.config.ts

@@ -3,24 +3,34 @@ export default defineNuxtConfig({
     compatibilityDate: "2024-11-01",
     ssr: true,
     devtools: { enabled: true },
-    css: ["~/assets/css/tailwind.css", "swiper/css"],
+    css: ["~/assets/css/tailwind.css", "swiper/css", "animate.css/animate.min.css"],
 
     routeRules: {
-        "/products": { prerender: false, ssr: false },
+        "/products": { prerender: false, ssr: false }
+    },
+
+    app: {
+        pageTransition: {
+            enterActiveClass:
+                "animate__animated animate__fadeIn animate__faster",
+            leaveActiveClass:
+                "animate__animated animate__fadeOut animate__faster",
+            mode: "out-in"
+        }
     },
 
     postcss: {
         plugins: {
             "@tailwindcss/postcss": {},
-            autoprefixer: {},
-        },
+            autoprefixer: {}
+        }
     },
 
     components: [
         {
             path: "~/components",
-            pathPrefix: false,
-        },
+            pathPrefix: false
+        }
     ],
 
     icon: {
@@ -28,9 +38,9 @@ export default defineNuxtConfig({
         customCollections: [
             {
                 prefix: "ci",
-                dir: "./public/icons",
-            },
-        ],
+                dir: "./public/icons"
+            }
+        ]
     },
 
     modules: [
@@ -41,9 +51,9 @@ export default defineNuxtConfig({
                     "DM Sans": "100..900",
                     Inter: "100..900",
                     download: true,
-                    inject: false,
-                },
-            },
+                    inject: false
+                }
+            }
         ],
         "@nuxt/icon",
         "reka-ui/nuxt",
@@ -53,7 +63,7 @@ export default defineNuxtConfig({
 
     runtimeConfig: {
         public: {
-            API_BASE_URL: "https://api.heymlz.com",
-        },
-    },
+            API_BASE_URL: "https://api.heymlz.com"
+        }
+    }
 });