From 83225032d0541d6044e761348271ab05297e061d Mon Sep 17 00:00:00 2001 From: John Campion Jr Date: Thu, 11 Feb 2021 23:55:19 -0500 Subject: [PATCH] feat: support layouts (#56) Co-authored-by: Anthony Fu --- package.json | 1 + pnpm-lock.yaml | 24 +++++++++++++++++------- src/App.vue | 5 +---- src/layouts/404.vue | 26 ++++++++++++++++++++++++++ src/layouts/README.md | 14 ++++++++++++++ src/layouts/default.vue | 9 +++++++++ src/layouts/home.vue | 9 +++++++++ src/main.ts | 5 ++++- src/pages/[...all].vue | 5 +++++ src/pages/index.vue | 5 +++++ tsconfig.json | 3 ++- vite.config.ts | 4 ++++ 12 files changed, 97 insertions(+), 13 deletions(-) create mode 100644 src/layouts/404.vue create mode 100644 src/layouts/README.md create mode 100644 src/layouts/default.vue create mode 100644 src/layouts/home.vue diff --git a/package.json b/package.json index 79dca94..5435b36 100644 --- a/package.json +++ b/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": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eb4c70b..309d4a0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -31,6 +31,7 @@ devDependencies: vite-plugin-md: 0.4.2_vite@2.0.0-beta.67 vite-plugin-pages: 0.3.0_vite@2.0.0-beta.67+vue@3.0.5 vite-plugin-pwa: 0.4.6 + vite-plugin-vue-layouts: 0.1.0_vite@2.0.0-beta.67 vite-ssg: 0.8.4_48c8dc7dae74de0e25414d6bbcdbc5e0 lockfileVersion: 5.2 packages: @@ -1608,14 +1609,12 @@ packages: /@vue/reactivity/3.0.5: dependencies: '@vue/shared': 3.0.5 - dev: false resolution: integrity: sha512-3xodUE3sEIJgS7ntwUbopIpzzvi7vDAOjVamfb2l+v1FUg0jpd3gf62N2wggJw3fxBMr+QvyxpD+dBoxLsmAjw== /@vue/runtime-core/3.0.5: dependencies: '@vue/reactivity': 3.0.5 '@vue/shared': 3.0.5 - dev: false resolution: integrity: sha512-Cnyi2NqREwOLcTEsIi1DQX1hHtkVj4eGm4hBG7HhokS05DqpK4/80jG6PCCnCH9rIJDB2FqtaODX397210plXg== /@vue/runtime-dom/3.0.5: @@ -1623,7 +1622,6 @@ packages: '@vue/runtime-core': 3.0.5 '@vue/shared': 3.0.5 csstype: 2.6.14 - dev: false resolution: integrity: sha512-iilX1KySeIzHHtErT6Y44db1rhWK5tAI0CiJIPr+SJoZ2jbjoOSE6ff/jfIQakchbm1d6jq6VtRVnp5xYdOXKA== /@vue/server-renderer/3.0.5_vue@3.0.5: @@ -2195,7 +2193,6 @@ packages: resolution: integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A== /csstype/2.6.14: - dev: false resolution: integrity: sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A== /dashdash/1.14.1: @@ -4583,7 +4580,7 @@ packages: request-promise-core: 1.1.4_request@2.88.2 stealthy-require: 1.1.1 tough-cookie: 2.5.0 - deprecated: 'request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142' + deprecated: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142 dev: true engines: node: '>=0.12.0' @@ -4613,7 +4610,7 @@ packages: tough-cookie: 2.5.0 tunnel-agent: 0.6.0 uuid: 3.4.0 - deprecated: 'request has been deprecated, see https://github.com/request/request/issues/3142' + deprecated: request has been deprecated, see https://github.com/request/request/issues/3142 dev: true engines: node: '>= 6' @@ -5371,6 +5368,19 @@ packages: dev: true resolution: integrity: sha512-3LonumSG4EcH9FT61d7wWouHkCmEciy3RPfvt25b835HMx9gb2Dt71t140+85Z5d+uANMSguC3miBnnGzagAMA== + /vite-plugin-vue-layouts/0.1.0_vite@2.0.0-beta.67: + dependencies: + '@vue/compiler-sfc': 3.0.5_vue@3.0.5 + debug: 4.3.2 + fast-glob: 3.2.5 + vite: 2.0.0-beta.67 + vue: 3.0.5 + vue-router: 4.0.3_vue@3.0.5 + dev: true + peerDependencies: + vite: ^2.0.0-beta.65 + resolution: + integrity: sha512-rAVadLmEA5ti+AyR+JXcYUbZ8MpQTOlNgBdJswNEBvo/gC59BT2d1kSf9/Gw3lEhX8+nGCbl/uVbQcTun1Y3pQ== /vite-ssg/0.8.4_48c8dc7dae74de0e25414d6bbcdbc5e0: dependencies: '@vue/compiler-sfc': 3.0.5_vue@3.0.5 @@ -5462,7 +5472,6 @@ packages: '@vue/compiler-dom': 3.0.5 '@vue/runtime-dom': 3.0.5 '@vue/shared': 3.0.5 - dev: false resolution: integrity: sha512-TfaprOmtsAfhQau7WsomXZ8d9op/dkQLNIq8qPV3A0Vxs6GR5E+c1rfJS1SDkXRQj+dFyfnec7+U0Be1huiScg== /w3c-hr-time/1.0.2: @@ -5847,6 +5856,7 @@ specifiers: 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 vue: ^3.0.5 vue-i18n: ^9.0.0-rc.6 diff --git a/src/App.vue b/src/App.vue index 1f358ca..8cffdce 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,8 +13,5 @@ useHead({ diff --git a/src/layouts/404.vue b/src/layouts/404.vue new file mode 100644 index 0000000..4f4f9b4 --- /dev/null +++ b/src/layouts/404.vue @@ -0,0 +1,26 @@ + + + diff --git a/src/layouts/README.md b/src/layouts/README.md new file mode 100644 index 0000000..6ca905c --- /dev/null +++ b/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 + +meta: + layout: home + +``` diff --git a/src/layouts/default.vue b/src/layouts/default.vue new file mode 100644 index 0000000..2b56306 --- /dev/null +++ b/src/layouts/default.vue @@ -0,0 +1,9 @@ + diff --git a/src/layouts/home.vue b/src/layouts/home.vue new file mode 100644 index 0000000..fc4b21e --- /dev/null +++ b/src/layouts/home.vue @@ -0,0 +1,9 @@ + diff --git a/src/main.ts b/src/main.ts index 0f2ad33..e7b0443 100644 --- a/src/main.ts +++ b/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, diff --git a/src/pages/[...all].vue b/src/pages/[...all].vue index e346b6b..ac0f5ab 100755 --- a/src/pages/[...all].vue +++ b/src/pages/[...all].vue @@ -9,3 +9,8 @@ const { t } = useI18n() {{ t('not-found') }} + + +meta: + layout: 404 + diff --git a/src/pages/index.vue b/src/pages/index.vue index f2a800e..52295ef 100644 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -53,3 +53,8 @@ const { t } = useI18n() + + +meta: + layout: home + diff --git a/tsconfig.json b/tsconfig.json index 57c961e..49dc024 100644 --- a/tsconfig.json +++ b/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/*"] diff --git a/vite.config.ts b/vite.config.ts index aa1b975..93691f3 100644 --- a/vite.config.ts +++ b/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',