feat: support layouts (#56)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
This commit is contained in:
John Campion Jr 2021-02-11 23:55:19 -05:00 committed by GitHub
parent 8dae6f96e5
commit 83225032d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 97 additions and 13 deletions

View File

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

View File

@ -31,6 +31,7 @@ devDependencies:
vite-plugin-md: 0.4.2_vite@2.0.0-beta.67 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-pages: 0.3.0_vite@2.0.0-beta.67+vue@3.0.5
vite-plugin-pwa: 0.4.6 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 vite-ssg: 0.8.4_48c8dc7dae74de0e25414d6bbcdbc5e0
lockfileVersion: 5.2 lockfileVersion: 5.2
packages: packages:
@ -1608,14 +1609,12 @@ packages:
/@vue/reactivity/3.0.5: /@vue/reactivity/3.0.5:
dependencies: dependencies:
'@vue/shared': 3.0.5 '@vue/shared': 3.0.5
dev: false
resolution: resolution:
integrity: sha512-3xodUE3sEIJgS7ntwUbopIpzzvi7vDAOjVamfb2l+v1FUg0jpd3gf62N2wggJw3fxBMr+QvyxpD+dBoxLsmAjw== integrity: sha512-3xodUE3sEIJgS7ntwUbopIpzzvi7vDAOjVamfb2l+v1FUg0jpd3gf62N2wggJw3fxBMr+QvyxpD+dBoxLsmAjw==
/@vue/runtime-core/3.0.5: /@vue/runtime-core/3.0.5:
dependencies: dependencies:
'@vue/reactivity': 3.0.5 '@vue/reactivity': 3.0.5
'@vue/shared': 3.0.5 '@vue/shared': 3.0.5
dev: false
resolution: resolution:
integrity: sha512-Cnyi2NqREwOLcTEsIi1DQX1hHtkVj4eGm4hBG7HhokS05DqpK4/80jG6PCCnCH9rIJDB2FqtaODX397210plXg== integrity: sha512-Cnyi2NqREwOLcTEsIi1DQX1hHtkVj4eGm4hBG7HhokS05DqpK4/80jG6PCCnCH9rIJDB2FqtaODX397210plXg==
/@vue/runtime-dom/3.0.5: /@vue/runtime-dom/3.0.5:
@ -1623,7 +1622,6 @@ packages:
'@vue/runtime-core': 3.0.5 '@vue/runtime-core': 3.0.5
'@vue/shared': 3.0.5 '@vue/shared': 3.0.5
csstype: 2.6.14 csstype: 2.6.14
dev: false
resolution: resolution:
integrity: sha512-iilX1KySeIzHHtErT6Y44db1rhWK5tAI0CiJIPr+SJoZ2jbjoOSE6ff/jfIQakchbm1d6jq6VtRVnp5xYdOXKA== integrity: sha512-iilX1KySeIzHHtErT6Y44db1rhWK5tAI0CiJIPr+SJoZ2jbjoOSE6ff/jfIQakchbm1d6jq6VtRVnp5xYdOXKA==
/@vue/server-renderer/3.0.5_vue@3.0.5: /@vue/server-renderer/3.0.5_vue@3.0.5:
@ -2195,7 +2193,6 @@ packages:
resolution: resolution:
integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A== integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
/csstype/2.6.14: /csstype/2.6.14:
dev: false
resolution: resolution:
integrity: sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A== integrity: sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==
/dashdash/1.14.1: /dashdash/1.14.1:
@ -4583,7 +4580,7 @@ packages:
request-promise-core: 1.1.4_request@2.88.2 request-promise-core: 1.1.4_request@2.88.2
stealthy-require: 1.1.1 stealthy-require: 1.1.1
tough-cookie: 2.5.0 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 dev: true
engines: engines:
node: '>=0.12.0' node: '>=0.12.0'
@ -4613,7 +4610,7 @@ packages:
tough-cookie: 2.5.0 tough-cookie: 2.5.0
tunnel-agent: 0.6.0 tunnel-agent: 0.6.0
uuid: 3.4.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 dev: true
engines: engines:
node: '>= 6' node: '>= 6'
@ -5371,6 +5368,19 @@ packages:
dev: true dev: true
resolution: resolution:
integrity: sha512-3LonumSG4EcH9FT61d7wWouHkCmEciy3RPfvt25b835HMx9gb2Dt71t140+85Z5d+uANMSguC3miBnnGzagAMA== 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: /vite-ssg/0.8.4_48c8dc7dae74de0e25414d6bbcdbc5e0:
dependencies: dependencies:
'@vue/compiler-sfc': 3.0.5_vue@3.0.5 '@vue/compiler-sfc': 3.0.5_vue@3.0.5
@ -5462,7 +5472,6 @@ packages:
'@vue/compiler-dom': 3.0.5 '@vue/compiler-dom': 3.0.5
'@vue/runtime-dom': 3.0.5 '@vue/runtime-dom': 3.0.5
'@vue/shared': 3.0.5 '@vue/shared': 3.0.5
dev: false
resolution: resolution:
integrity: sha512-TfaprOmtsAfhQau7WsomXZ8d9op/dkQLNIq8qPV3A0Vxs6GR5E+c1rfJS1SDkXRQj+dFyfnec7+U0Be1huiScg== integrity: sha512-TfaprOmtsAfhQau7WsomXZ8d9op/dkQLNIq8qPV3A0Vxs6GR5E+c1rfJS1SDkXRQj+dFyfnec7+U0Be1huiScg==
/w3c-hr-time/1.0.2: /w3c-hr-time/1.0.2:
@ -5847,6 +5856,7 @@ specifiers:
vite-plugin-md: ^0.4.2 vite-plugin-md: ^0.4.2
vite-plugin-pages: ^0.3.0 vite-plugin-pages: ^0.3.0
vite-plugin-pwa: ^0.4.6 vite-plugin-pwa: ^0.4.6
vite-plugin-vue-layouts: ^0.1.0
vite-ssg: ^0.8.4 vite-ssg: ^0.8.4
vue: ^3.0.5 vue: ^3.0.5
vue-i18n: ^9.0.0-rc.6 vue-i18n: ^9.0.0-rc.6

View File

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

26
src/layouts/404.vue Normal file
View File

@ -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>

14
src/layouts/README.md Normal file
View File

@ -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>
```

9
src/layouts/default.vue Normal file
View File

@ -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>

9
src/layouts/home.vue Normal file
View File

@ -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>

View File

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

View File

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

View File

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

View File

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

View File

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