Init

src/layouts/404.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const router = useRouter()
+const { t } = useI18n()
+</script>
+
+<template>
+  <Navbar />
+  <main class="px-4 py-10 text-center text-fly-600 dark:text-gray-200">
+    <div>
+      <p class="text-4xl">
+        <carbon-warning class="inline-block" />
+      </p>
+    </div>
+    <router-view />
+    <div>
+      <button
+        class="btn m-3 text-sm mt-8"
+        @click="router.go(-2)"
+      >
+        {{ t('button.back') }}
+      </button>
+    </div>
+  </main>
+</template>

src/layouts/README.md

@@ -0,0 +1,14 @@
+## 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.
+
+With [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) and [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts), you can specify the layout in the page's SFCs like this:
+
+```html
+<route lang="yaml">
+meta:
+  layout: home
+</route>
+```

src/layouts/default.vue

@@ -0,0 +1,10 @@
+<template>
+  <Navbar />
+  <main class="px-4 py-10 text-gray-700 dark:text-gray-200">
+    <router-view />
+    <Footer class="text-center" />
+    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
+      [Default Layout]
+    </div>
+  </main>
+</template>

src/layouts/home.vue

@@ -0,0 +1,6 @@
+<template>
+  <Navbar />
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+    <router-view />
+  </main>
+</template>

src/layouts/posts.vue

@@ -0,0 +1,8 @@
+<template>
+  <Navbar />
+  <main class="px-4 py-10 text-left text-gray-700 dark:text-gray-200">
+    <article class="prose m-auto">
+      <router-view />
+    </article>
+  </main>
+</template>

src/layouts/projects.vue

@@ -0,0 +1,8 @@
+<template>
+  <Navbar />
+  <main class="px-4 py-10 text-left text-gray-700 dark:text-gray-200">
+    <article class="prose m-auto">
+      <router-view />
+    </article>
+  </main>
+</template>