add layout transition

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

app.vue

@@ -1,3 +1,19 @@
+<script setup lang="ts">
+useHead({
+  htmlAttrs: {
+    lang: "en",
+  },
+  title: "",
+  titleTemplate: "%s  riyad",
+  meta: [
+    { name: "description", content: "Al Asad Nur riyad" },
+    { name: "twitter:card", content: "summary_large_image" },
+    { name: "twitter:site", content: "@nuxt_js" },
+    { name: "twitter:creator", content: "@nuxt_js" },
+  ],
+});
+</script>
+
 <template>
   <div>
     <NuxtLayout>
@@ -7,13 +23,24 @@
   </div>
 </template>
 <style>
+/* Page transition */
 .page-enter-active,
 .page-leave-active {
-  transition: all 0.4s;
+  transition: all 0.2s;
 }
 .page-enter-from,
 .page-leave-to {
   opacity: 0;
   filter: blur(1rem);
 }
+
+/* Layout Transition */
+.layout-enter-active,
+.layout-leave-active {
+  transition: all 0.3s;
+}
+.layout-enter-from,
+.layout-leave-to {
+  filter: grayscale(1);
+}
 </style>

nuxt.config.ts

@@ -1,7 +1,12 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   app: {
+    head: {
+      viewport: "width=device-width, initial-scale=2",
+      charset: "utf-16",
+    },
     pageTransition: { name: "page", mode: "out-in" },
+    layoutTransition: { name: "layout", mode: "out-in" },
   },
   typescript: {
     strict: true,