From b87696f1cf00456c5ad95036d6211fa38b80c15e Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Thu, 22 Dec 2022 02:07:44 +0600
Subject: [PATCH] add layout transition

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 app.vue        | 29 ++++++++++++++++++++++++++++-
 nuxt.config.ts |  5 +++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/app.vue b/app.vue
index 61334c5..e062b34 100644
--- a/app.vue
+++ b/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>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5012a3d..943f2a1 100644
--- a/nuxt.config.ts
+++ b/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,