From b1eaea501a637f89a3df476833b0086a290c1eb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hasan=20Demirta=C5=9F?= <utsukushihito@outlook.com>
Date: Wed, 20 Apr 2022 18:28:49 +0300
Subject: [PATCH] feat: introduce layouts (#28)

---
 README.md           |  2 ++
 app.vue             |  5 ++---
 layouts/404.vue     | 18 ++++++++++++++++++
 layouts/README.md   | 13 +++++++++++++
 layouts/default.vue |  9 +++++++++
 layouts/home.vue    |  9 +++++++++
 pages/[...all].vue  | 11 +++++++++++
 pages/hi/[id].vue   |  4 ++++
 8 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 layouts/404.vue
 create mode 100644 layouts/README.md
 create mode 100644 layouts/default.vue
 create mode 100644 layouts/home.vue
 create mode 100644 pages/[...all].vue

diff --git a/README.md b/README.md
index 67440a0..3c6a12a 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,8 @@
 
 - 🍍 [State Management via Pinia](https://pinia.esm.dev/)
 
+- 📑 [Layout system](./layouts)
+
 - 📥 APIs auto importing - for Composition API, VueUse and custom composables.
 
 - 🏎 Zero-config cloud functions and deploy
diff --git a/app.vue b/app.vue
index b135b8a..fad2e38 100644
--- a/app.vue
+++ b/app.vue
@@ -1,8 +1,7 @@
 <template>
-  <main class="py-20 px-10 text-center">
+  <NuxtLayout>
     <NuxtPage />
-    <Footer />
-  </main>
+  </NuxtLayout>
 </template>
 
 <style>
diff --git a/layouts/404.vue b/layouts/404.vue
new file mode 100644
index 0000000..67b7468
--- /dev/null
+++ b/layouts/404.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const router = useRouter()
+</script>
+
+<template>
+  <main p="x4 y10" text="center teal-700 dark:gray-200">
+    <div text-4xl>
+      <div i-carbon-warning inline-block />
+    </div>
+    <slot />
+    <div>
+      <button btn text-sm m="3 t8" @click="router.back()">
+        Back
+      </button>
+    </div>
+    <Footer />
+  </main>
+</template>
\ No newline at end of file
diff --git a/layouts/README.md b/layouts/README.md
new file mode 100644
index 0000000..32d7bfa
--- /dev/null
+++ b/layouts/README.md
@@ -0,0 +1,13 @@
+## Layouts
+
+Vue components in this dir are used as layouts.
+
+By default, `default.vue` will be used unless an alternative is specified in the route meta.
+
+```html
+<script setup lang="ts">
+definePageMeta({
+  layout: 'home',
+})
+</script>
+```
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
new file mode 100644
index 0000000..2ce831c
--- /dev/null
+++ b/layouts/default.vue
@@ -0,0 +1,9 @@
+<template>
+  <main class="py-20 px-10 text-center">
+    <slot />
+    <Footer />
+    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
+      [Default Layout]
+    </div>
+  </main>
+</template>
diff --git a/layouts/home.vue b/layouts/home.vue
new file mode 100644
index 0000000..626c6df
--- /dev/null
+++ b/layouts/home.vue
@@ -0,0 +1,9 @@
+<template>
+  <main class="py-20 px-10 text-center">
+    <slot />
+    <Footer />
+    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
+      [Home Layout]
+    </div>
+  </main>
+</template>
diff --git a/pages/[...all].vue b/pages/[...all].vue
new file mode 100644
index 0000000..bee7a05
--- /dev/null
+++ b/pages/[...all].vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: '404',
+})
+</script>
+
+<template>
+  <div>
+    Not Found
+  </div>
+</template>
\ No newline at end of file
diff --git a/pages/hi/[id].vue b/pages/hi/[id].vue
index 738f1f1..6ba0773 100644
--- a/pages/hi/[id].vue
+++ b/pages/hi/[id].vue
@@ -6,6 +6,10 @@ const name = route.params.id
 watchEffect(() => {
   user.setNewName(route.params.id as string)
 })
+
+definePageMeta({
+  layout: 'home',
+})
 </script>
 
 <template>