feat: support layouts (#56)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

package.json

@@ -38,6 +38,7 @@
     "vite-plugin-md": "^0.4.2",
     "vite-plugin-pages": "^0.3.0",
     "vite-plugin-pwa": "^0.4.6",
+    "vite-plugin-vue-layouts": "^0.1.0",
     "vite-ssg": "^0.8.4"
   },
   "eslintConfig": {

src/App.vue

@@ -13,8 +13,5 @@ useHead({
 </script>
 
 <template>
-  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
-    <router-view />
-    <Footer />
-  </main>
+  <router-view />
 </template>

src/layouts/404.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { t } = useI18n()
+</script>
+
+<template>
+  <main class="px-4 py-10 text-center text-teal-700 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.back()"
+      >
+        {{ 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,9 @@
+<template>
+  <main class="px-4 py-10 text-center text-teal-700 dark:text-gray-200">
+    <router-view />
+    <Footer />
+    <div class="mt-5 m-auto text-center opacity-25 text-sm">
+      [Default Layout]
+    </div>
+  </main>
+</template>

src/layouts/home.vue

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

src/main.ts

@@ -1,8 +1,11 @@
 import './styles/main.postcss'
-import routes from 'pages-generated'
 import { ViteSSG } from 'vite-ssg'
+import generatedRoutes from 'pages-generated'
+import { setupLayouts } from 'layouts-generated'
 import App from './App.vue'
 
+const routes = setupLayouts(generatedRoutes)
+
 // https://github.com/antfu/vite-ssg
 export const createApp = ViteSSG(
   App,

src/pages/[...all].vue

@@ -9,3 +9,8 @@ const { t } = useI18n()
     {{ t('not-found') }}
   </div>
 </template>
+
+<route lang="yaml">
+meta:
+  layout: 404
+</route>

src/pages/index.vue

@@ -53,3 +53,8 @@ const { t } = useI18n()
     </div>
   </div>
 </template>
+
+<route lang="yaml">
+meta:
+  layout: home
+</route>

tsconfig.json

@@ -15,7 +15,8 @@
     "forceConsistentCasingInFileNames": true,
     "types": [
       "vite/client",
-      "vite-plugin-pages/client"
+      "vite-plugin-pages/client",
+      "vite-plugin-vue-layouts/client"
     ],
     "paths": {
       "~/*": ["src/*"]

vite.config.ts

@@ -2,6 +2,7 @@ import path from 'path'
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import Pages from 'vite-plugin-pages'
+import Layouts from 'vite-plugin-vue-layouts'
 import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
 import ViteComponents from 'vite-plugin-components'
 import Markdown from 'vite-plugin-md'
@@ -23,6 +24,9 @@ export default defineConfig({
       extensions: ['vue', 'md'],
     }),
 
+    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
+    Layouts(),
+
     // https://github.com/antfu/vite-plugin-md
     Markdown({
       wrapperClasses: 'prose prose-sm m-auto text-left',