feat: add vite-plugin-vue-component-preview plugin (#386)

2022-09-22 14:15:24 +08:00 · 2022-09-22 14:15:24 +08:00 · 656953339b
commit 656953339b
parent a1c3667472
6 changed files with 67 additions and 119 deletions
--- a/README.md
+++ b/README.md
@ -42,6 +42,8 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>

 - 🌍 [I18n ready](./locales)

+- 🔎 [Component Preview](https://github.com/antfu/vite-plugin-vue-component-preview)
+
 - 🗒 [Markdown Support](https://github.com/antfu/vite-plugin-vue-markdown)

 - 🔥 Use the [new `<script setup>` syntax](https://github.com/vuejs/rfcs/pull/227)
@ -79,10 +81,11 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 - [Vue Router](https://github.com/vuejs/router)
  - [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) - file system based routing
  - [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) - layouts for pages
- [Pinia](https://pinia.vuejs.org) - Intuitive, type safe, light and flexible Store for Vue using the composition api
+- [Pinia](https://pinia.esm.dev) - Intuitive, type safe, light and flexible Store for Vue using the composition api
 - [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - components auto import
 - [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
 - [`vite-plugin-pwa`](https://github.com/antfu/vite-plugin-pwa) - PWA
+- [`vite-plugin-vue-component-preview`](https://github.com/johnsoncodehk/vite-plugin-vue-component-preview) - Preview single component in VSCode
 - [`vite-plugin-vue-markdown`](https://github.com/antfu/vite-plugin-vue-markdown) - Markdown as components / components in Markdown
  - [`markdown-it-shiki`](https://github.com/antfu/markdown-it-shiki) - [Shiki](https://github.com/shikijs/shiki) for syntax highlighting
 - [Vue I18n](https://github.com/intlify/vue-i18n-next) - Internationalization
@ -135,7 +138,6 @@ As this template is strongly opinionated, the following provides a curated list
 - [vitesse-lite-react](https://github.com/lxy-yz/vitesse-lite-react) by [@lxy-yz](https://github.com/lxy-yz) - vitesse-lite React fork
 - [vide](https://github.com/Nico-Mayer/vide) by [@nico-mayer](https://github.com/Nico-Mayer) - Vite superlight Beginner Starter Template
 - [vitesse-h5](https://github.com/YunYouJun/vitesse-h5) by [@YunYouJun](https://github.com/YunYouJun) - Vitesse for Mobile
- [bat](https://github.com/olgam4/bat) by [@olgam4](https://github.com/olgam4) - Vitesse for SolidJS

 ## Try it now!

--- a/package.json
+++ b/package.json
@ -52,6 +52,7 @@
    "vite-plugin-inspect": "^0.6.0",
    "vite-plugin-pages": "^0.25.0",
    "vite-plugin-pwa": "^0.12.3",
+    "vite-plugin-vue-component-preview": "^0.3.2",
    "vite-plugin-vue-layouts": "^0.7.0",
    "vite-plugin-vue-markdown": "^0.21.1",
    "vite-ssg": "^0.20.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -32,6 +32,7 @@ specifiers:
  vite-plugin-inspect: ^0.6.0
  vite-plugin-pages: ^0.25.0
  vite-plugin-pwa: ^0.12.3
+  vite-plugin-vue-component-preview: ^0.3.2
  vite-plugin-vue-layouts: ^0.7.0
  vite-plugin-vue-markdown: ^0.21.1
  vite-ssg: ^0.20.2
@ -81,6 +82,7 @@ devDependencies:
  vite-plugin-inspect: 0.6.0_vite@3.0.4
  vite-plugin-pages: 0.25.0_vite@3.0.4
  vite-plugin-pwa: 0.12.3_vite@3.0.4
+  vite-plugin-vue-component-preview: 0.3.2_vite@3.0.4
  vite-plugin-vue-layouts: 0.7.0_2idawcohe3eegwclkuflddhqau
  vite-plugin-vue-markdown: 0.21.1_vite@3.0.4
  vite-ssg: 0.20.2_thgl23324gg75myoeph36y4c5a
@ -98,7 +100,7 @@ packages:
      '@jridgewell/trace-mapping': 0.3.14
    dev: true

-  /@antfu/eslint-config-basic/0.25.2_jnss7dz76sznncvpyatba5hbxa:
+  /@antfu/eslint-config-basic/0.25.2_qugx7qdu5zevzvxaiqyxfiwquq:
    resolution: {integrity: sha512-D81jE90B7cujMmU2mKEaUcRsKRAfVX4PniEoaD0c3HiqprqghfBjuv3B6p1+tG9uJQAgLBVsK+G92Y+AAgFaOA==}
    peerDependencies:
      eslint: '>=7.4.0'
@ -107,7 +109,7 @@ packages:
      eslint-plugin-antfu: 0.25.2_qugx7qdu5zevzvxaiqyxfiwquq
      eslint-plugin-eslint-comments: 3.2.0_eslint@8.21.0
      eslint-plugin-html: 6.2.0
-      eslint-plugin-import: 2.26.0_eygs4xj346vriqwkjbwjuyviaa
+      eslint-plugin-import: 2.26.0_eslint@8.21.0
      eslint-plugin-jsonc: 2.3.1_eslint@8.21.0
      eslint-plugin-markdown: 2.2.1_eslint@8.21.0
      eslint-plugin-n: 15.2.4_eslint@8.21.0
@ -117,9 +119,6 @@ packages:
      jsonc-eslint-parser: 2.1.0
      yaml-eslint-parser: 1.0.1
    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
      - supports-color
      - typescript
    dev: true
@ -133,8 +132,6 @@ packages:
      eslint: 8.21.0
      eslint-plugin-react: 7.30.1_eslint@8.21.0
    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
      - supports-color
      - typescript
    dev: true
@ -145,14 +142,12 @@ packages:
      eslint: '>=7.4.0'
      typescript: '>=3.9'
    dependencies:
-      '@antfu/eslint-config-basic': 0.25.2_jnss7dz76sznncvpyatba5hbxa
+      '@antfu/eslint-config-basic': 0.25.2_qugx7qdu5zevzvxaiqyxfiwquq
      '@typescript-eslint/eslint-plugin': 5.31.0_jnss7dz76sznncvpyatba5hbxa
      '@typescript-eslint/parser': 5.31.0_qugx7qdu5zevzvxaiqyxfiwquq
      eslint: 8.21.0
      typescript: 4.7.4
    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
      - supports-color
    dev: true

@ -165,8 +160,6 @@ packages:
      eslint: 8.21.0
      eslint-plugin-vue: 9.3.0_eslint@8.21.0
    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
      - supports-color
      - typescript
    dev: true
@ -183,7 +176,7 @@ packages:
      eslint: 8.21.0
      eslint-plugin-eslint-comments: 3.2.0_eslint@8.21.0
      eslint-plugin-html: 6.2.0
-      eslint-plugin-import: 2.26.0_eygs4xj346vriqwkjbwjuyviaa
+      eslint-plugin-import: 2.26.0_eslint@8.21.0
      eslint-plugin-jsonc: 2.3.1_eslint@8.21.0
      eslint-plugin-n: 15.2.4_eslint@8.21.0
      eslint-plugin-promise: 6.0.0_eslint@8.21.0
@ -193,8 +186,6 @@ packages:
      jsonc-eslint-parser: 2.1.0
      yaml-eslint-parser: 1.0.1
    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
      - supports-color
      - typescript
    dev: true
@ -1388,13 +1379,11 @@ packages:
      uuid: 8.3.2
    dev: true

-  /@cypress/xvfb/1.2.4_supports-color@8.1.1:
+  /@cypress/xvfb/1.2.4:
    resolution: {integrity: sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==}
    dependencies:
-      debug: 3.2.7_supports-color@8.1.1
+      debug: 3.2.7
      lodash.once: 4.1.1
-    transitivePeerDependencies:
-      - supports-color
    dev: true

  /@eslint/eslintrc/1.3.0:
@ -1460,8 +1449,8 @@ packages:
      - supports-color
    dev: true

-  /@intlify/bundle-utils/3.1.0_vue-i18n@9.2.2:
-    resolution: {integrity: sha512-ghlJ0kR2cCQ8D+poKknC0Xx0ncOt3J3os7CcIAqqIWVF7k6AtGoCDnIru+YzlZcvFRNmP9wEZ7jKliojCdAWNg==}
+  /@intlify/bundle-utils/3.1.2_vue-i18n@9.2.2:
+    resolution: {integrity: sha512-amgSo0NN5OKWYdcgFmfJqo2tcUcZ6C66Bxm5ALQnB0m3MUQtS9aJzKoIo+EU9XQiOVmlBFxRtNoZm+psHa5FNA==}
    engines: {node: '>= 12'}
    peerDependencies:
      petite-vue-i18n: '*'
@ -1472,8 +1461,8 @@ packages:
      vue-i18n:
        optional: true
    dependencies:
-      '@intlify/message-compiler': 9.2.0
-      '@intlify/shared': 9.2.0
+      '@intlify/message-compiler': 9.3.0-beta.3
+      '@intlify/shared': 9.3.0-beta.3
      jsonc-eslint-parser: 1.4.1
      source-map: 0.6.1
      vue-i18n: 9.2.2_vue@3.2.37
@ -1488,20 +1477,14 @@ packages:
      '@intlify/message-compiler': 9.2.2
      '@intlify/shared': 9.2.2
      '@intlify/vue-devtools': 9.2.2
+    dev: false

  /@intlify/devtools-if/9.2.2:
    resolution: {integrity: sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==}
    engines: {node: '>= 14'}
    dependencies:
      '@intlify/shared': 9.2.2
-
-  /@intlify/message-compiler/9.2.0:
-    resolution: {integrity: sha512-KGwwZsl+Nw2O26ZOKdytncxzKnMZ236KmM70u4GePgbizI+pu8yAh0apKxljSPzEJ7WECKTVc9R+laG12EJQYA==}
-    engines: {node: '>= 14'}
-    dependencies:
-      '@intlify/shared': 9.2.0
-      source-map: 0.6.1
-    dev: true
+    dev: false

  /@intlify/message-compiler/9.2.2:
    resolution: {integrity: sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==}
@ -1509,15 +1492,25 @@ packages:
    dependencies:
      '@intlify/shared': 9.2.2
      source-map: 0.6.1
+    dev: false

-  /@intlify/shared/9.2.0:
-    resolution: {integrity: sha512-71uObL3Sy2ZiBQBMVETbkspE4Plpy87Hvlj6FAUF3xdD+M82tuxe3MVJjaD3ucqhtHmQWBkAWEurVLdPYr8G2g==}
+  /@intlify/message-compiler/9.3.0-beta.3:
+    resolution: {integrity: sha512-j8OwToBQgs01RBMX4GCDNQfcnmw3AiDG3moKIONTrfXcf+1yt/rWznLTYH/DXbKcFMAFijFpCzMYjUmH1jVFYA==}
    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/shared': 9.3.0-beta.3
+      source-map: 0.6.1
    dev: true

  /@intlify/shared/9.2.2:
    resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
    engines: {node: '>= 14'}
+    dev: false
+
+  /@intlify/shared/9.3.0-beta.3:
+    resolution: {integrity: sha512-Z/0TU4GhFKRxKh+0RbwJExik9zz57gXYgxSYaPn7YQdkQ/pabSioCY/SXnYxQHL6HzULF5tmqarFm6glbGqKhw==}
+    engines: {node: '>= 14'}
+    dev: true

  /@intlify/vite-plugin-vue-i18n/6.0.0_vite@3.0.4+vue-i18n@9.2.2:
    resolution: {integrity: sha512-9hvd846YWACtSr6akOR57utxSP2205XJqVfidiQVZLTkHTVHjDhPiRg1ShdZBT909fzW2+71e2tgG4lRi4r87Q==}
@ -1534,8 +1527,8 @@ packages:
      vue-i18n:
        optional: true
    dependencies:
-      '@intlify/bundle-utils': 3.1.0_vue-i18n@9.2.2
-      '@intlify/shared': 9.2.0
+      '@intlify/bundle-utils': 3.1.2_vue-i18n@9.2.2
+      '@intlify/shared': 9.3.0-beta.3
      '@rollup/pluginutils': 4.2.1
      debug: 4.3.4
      fast-glob: 3.2.11
@ -1552,6 +1545,7 @@ packages:
    dependencies:
      '@intlify/core-base': 9.2.2
      '@intlify/shared': 9.2.2
+    dev: false

  /@jridgewell/gen-mapping/0.1.1:
    resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
@ -1660,8 +1654,6 @@ packages:
      promise-retry: 2.0.1
      semver: 7.3.7
      which: 2.0.2
-    transitivePeerDependencies:
-      - bluebird
    dev: true

  /@npmcli/installed-package-contents/1.0.7:
@ -1703,7 +1695,6 @@ packages:
      read-package-json-fast: 2.0.3
      which: 2.0.2
    transitivePeerDependencies:
-      - bluebird
      - supports-color
    dev: true

@ -1898,6 +1889,7 @@ packages:

  /@types/web-bluetooth/0.0.15:
    resolution: {integrity: sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA==}
+    dev: false

  /@types/yauzl/2.10.0:
    resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
@ -2269,6 +2261,7 @@ packages:

  /@vue/devtools-api/6.2.1:
    resolution: {integrity: sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==}
+    dev: false

  /@vue/reactivity-transform/3.2.37:
    resolution: {integrity: sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==}
@ -2289,6 +2282,7 @@ packages:
    dependencies:
      '@vue/reactivity': 3.2.37
      '@vue/shared': 3.2.37
+    dev: false

  /@vue/runtime-dom/3.2.37:
    resolution: {integrity: sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==}
@ -2296,6 +2290,7 @@ packages:
      '@vue/runtime-core': 3.2.37
      '@vue/shared': 3.2.37
      csstype: 2.6.20
+    dev: false

  /@vue/server-renderer/3.2.37_vue@3.2.37:
    resolution: {integrity: sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==}
@ -2305,6 +2300,7 @@ packages:
      '@vue/compiler-ssr': 3.2.37
      '@vue/shared': 3.2.37
      vue: 3.2.37
+    dev: false

  /@vue/shared/3.2.37:
    resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}
@ -2327,6 +2323,7 @@ packages:
    transitivePeerDependencies:
      - '@vue/composition-api'
      - vue
+    dev: false

  /@vueuse/head/0.7.9_vue@3.2.37:
    resolution: {integrity: sha512-5wnRiH2XIUSLLXJDLDDTcpvAg5QXgTIVZl46AU7to/T91KHsdBLHSE4WhRO7kP0jbkAhlxnx64E29cQtwBrMjg==}
@ -2334,9 +2331,11 @@ packages:
      vue: '>=3'
    dependencies:
      vue: 3.2.37
+    dev: false

  /@vueuse/metadata/9.1.0:
    resolution: {integrity: sha512-8OEhlog1iaAGTD3LICZ8oBGQdYeMwByvXetOtAOZCJOzyCRSwqwdggTsmVZZ1rkgYIEqgUBk942AsAPwM21s6A==}
+    dev: false

  /@vueuse/shared/9.1.0_vue@3.2.37:
    resolution: {integrity: sha512-pB/3njQu4tfJJ78ajELNda0yMG6lKfpToQW7Soe09CprF1k3QuyoNi1tBNvo75wBDJWD+LOnr+c4B5HZ39jY/Q==}
@ -2345,6 +2344,7 @@ packages:
    transitivePeerDependencies:
      - '@vue/composition-api'
      - vue
+    dev: false

  /abab/2.0.6:
    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
@ -2688,8 +2688,6 @@ packages:
      raw-body: 2.5.1
      type-is: 1.6.18
      unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
    dev: true

  /boolbase/1.0.0:
@ -2794,8 +2792,6 @@ packages:
      ssri: 9.0.1
      tar: 6.1.11
      unique-filename: 1.1.1
-    transitivePeerDependencies:
-      - bluebird
    dev: true

  /cachedir/2.3.0:
@ -3025,8 +3021,6 @@ packages:
      on-headers: 1.0.2
      safe-buffer: 5.1.2
      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
    dev: true

  /concat-map/0.0.1:
@ -3170,6 +3164,7 @@ packages:

  /csstype/2.6.20:
    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
+    dev: false

  /cypress/10.4.0:
    resolution: {integrity: sha512-OM7F8MRE01SHQRVVzunid1ZK1m90XTxYnl+7uZfIrB4CYqUDCrZEeSyCXzIbsS6qcaijVCAhqDL60SxG8N6hew==}
@ -3178,7 +3173,7 @@ packages:
    requiresBuild: true
    dependencies:
      '@cypress/request': 2.88.10
-      '@cypress/xvfb': 1.2.4_supports-color@8.1.1
+      '@cypress/xvfb': 1.2.4
      '@types/node': 14.18.22
      '@types/sinonjs__fake-timers': 8.1.1
      '@types/sizzle': 2.3.3
@ -3243,38 +3238,16 @@ packages:

  /debug/2.6.9:
    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
    dependencies:
      ms: 2.0.0
    dev: true

  /debug/3.2.7:
    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
    dependencies:
      ms: 2.1.3
    dev: true

-  /debug/3.2.7_supports-color@8.1.1:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.3
-      supports-color: 8.1.1
-    dev: true
-
  /debug/4.3.4:
    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
    engines: {node: '>=6.0'}
@ -3842,34 +3815,14 @@ packages:
    dependencies:
      debug: 3.2.7
      resolve: 1.22.1
-    transitivePeerDependencies:
-      - supports-color
    dev: true

-  /eslint-module-utils/2.7.3_vozeh3qpn3prlhg65r4uuu3jv4:
+  /eslint-module-utils/2.7.3:
    resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==}
    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
    dependencies:
-      '@typescript-eslint/parser': 5.31.0_qugx7qdu5zevzvxaiqyxfiwquq
      debug: 3.2.7
-      eslint-import-resolver-node: 0.3.6
      find-up: 2.1.0
-    transitivePeerDependencies:
-      - supports-color
    dev: true

  /eslint-plugin-antfu/0.25.2_qugx7qdu5zevzvxaiqyxfiwquq:
@ -3919,24 +3872,19 @@ packages:
      htmlparser2: 7.2.0
    dev: true

-  /eslint-plugin-import/2.26.0_eygs4xj346vriqwkjbwjuyviaa:
+  /eslint-plugin-import/2.26.0_eslint@8.21.0:
    resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
    engines: {node: '>=4'}
    peerDependencies:
-      '@typescript-eslint/parser': '*'
      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
    dependencies:
-      '@typescript-eslint/parser': 5.31.0_qugx7qdu5zevzvxaiqyxfiwquq
      array-includes: 3.1.5
      array.prototype.flat: 1.3.0
      debug: 2.6.9
      doctrine: 2.1.0
      eslint: 8.21.0
      eslint-import-resolver-node: 0.3.6
-      eslint-module-utils: 2.7.3_vozeh3qpn3prlhg65r4uuu3jv4
+      eslint-module-utils: 2.7.3
      has: 1.0.3
      is-core-module: 2.9.0
      is-glob: 4.0.3
@ -3944,10 +3892,6 @@ packages:
      object.values: 1.1.5
      resolve: 1.22.1
      tsconfig-paths: 3.14.1
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
    dev: true

  /eslint-plugin-jsonc/2.3.1_eslint@8.21.0:
@ -4327,8 +4271,6 @@ packages:
      type-is: 1.6.18
      utils-merge: 1.0.1
      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
    dev: true

  /extend-shallow/2.0.1:
@ -4446,8 +4388,6 @@ packages:
      parseurl: 1.3.3
      statuses: 2.0.1
      unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
    dev: true

  /find-up/2.1.0:
@ -5721,7 +5661,6 @@ packages:
      socks-proxy-agent: 7.0.0
      ssri: 9.0.1
    transitivePeerDependencies:
-      - bluebird
      - supports-color
    dev: true

@ -5995,7 +5934,6 @@ packages:
      tar: 6.1.11
      which: 2.0.2
    transitivePeerDependencies:
-      - bluebird
      - supports-color
    dev: true

@ -6095,7 +6033,6 @@ packages:
      npm-package-arg: 9.1.0
      proc-log: 2.0.1
    transitivePeerDependencies:
-      - bluebird
      - supports-color
    dev: true

@ -6384,7 +6321,6 @@ packages:
      ssri: 9.0.1
      tar: 6.1.11
    transitivePeerDependencies:
-      - bluebird
      - supports-color
    dev: true

@ -6604,11 +6540,6 @@ packages:

  /promise-inflight/1.0.1:
    resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
-    peerDependencies:
-      bluebird: '*'
-    peerDependenciesMeta:
-      bluebird:
-        optional: true
    dev: true

  /promise-retry/2.0.1:
@ -7018,8 +6949,6 @@ packages:
      on-finished: 2.4.1
      range-parser: 1.2.1
      statuses: 2.0.1
-    transitivePeerDependencies:
-      - supports-color
    dev: true

  /serialize-javascript/4.0.0:
@ -7036,8 +6965,6 @@ packages:
      escape-html: 1.0.3
      parseurl: 1.3.3
      send: 0.18.0
-    transitivePeerDependencies:
-      - supports-color
    dev: true

  /set-blocking/2.0.0:
@ -7411,7 +7338,6 @@ packages:
      semver: 7.3.7
      yargs: 17.5.1
    transitivePeerDependencies:
-      - bluebird
      - supports-color
    dev: true

@ -7621,6 +7547,7 @@ packages:
    resolution: {integrity: sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==}
    engines: {node: '>=4.2.0'}
    hasBin: true
+    dev: true

  /uc.micro/1.0.6:
    resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
@ -7980,6 +7907,14 @@ packages:
      - supports-color
    dev: true

+  /vite-plugin-vue-component-preview/0.3.2_vite@3.0.4:
+    resolution: {integrity: sha512-vxtrrsIKCm7BbZ6IE6WS7qF/u86EoD8mJ0czs5fqU9HGK35rLjGR85H5m2ZtieQgHv56ueVtASp6SOXThWcosQ==}
+    dependencies:
+      vite-plugin-vue-markdown: 0.21.1_vite@3.0.4
+    transitivePeerDependencies:
+      - vite
+    dev: true
+
  /vite-plugin-vue-layouts/0.7.0_2idawcohe3eegwclkuflddhqau:
    resolution: {integrity: sha512-k5XDmRNFo4M/GmUjhbRXj2WmJiFcGoVI8l/uZ72RHyRDQr4wE/6Zq/KFq0lqXomWQxTSzakQRUswzNwtvZLE8A==}
    peerDependencies:
@ -8140,6 +8075,7 @@ packages:
        optional: true
    dependencies:
      vue: 3.2.37
+    dev: false

  /vue-eslint-parser/9.0.3_eslint@8.21.0:
    resolution: {integrity: sha512-yL+ZDb+9T0ELG4VIFo/2anAOz8SvBdlqEnQnvJ3M7Scq56DvtjY0VY88bByRZB0D4J0u8olBcfrXTVONXsh4og==}
@ -8170,6 +8106,7 @@ packages:
      '@intlify/vue-devtools': 9.2.2
      '@vue/devtools-api': 6.2.1
      vue: 3.2.37
+    dev: false

  /vue-router/4.1.3_vue@3.2.37:
    resolution: {integrity: sha512-XvK81bcYglKiayT7/vYAg/f36ExPC4t90R/HIpzrZ5x+17BOWptXLCrEPufGgZeuq68ww4ekSIMBZY1qdUdfjA==}
@ -8178,6 +8115,7 @@ packages:
    dependencies:
      '@vue/devtools-api': 6.2.1
      vue: 3.2.37
+    dev: false

  /vue-tsc/0.39.5_typescript@4.7.4:
    resolution: {integrity: sha512-jhTsrKhZkafpIeN4Cbhr1K53hNfa/oesSrlh7hUaeHyCk55VhZT6oJkwJbtqN4MYkWZIwPrm3/xTwsELuf2ocg==}
@ -8198,6 +8136,7 @@ packages:
      '@vue/runtime-dom': 3.2.37
      '@vue/server-renderer': 3.2.37_vue@3.2.37
      '@vue/shared': 3.2.37
+    dev: false

  /w3c-hr-time/1.0.2:
    resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
--- a/src/main.ts
+++ b/src/main.ts
@ -1,5 +1,6 @@
 import { ViteSSG } from 'vite-ssg'
 import { setupLayouts } from 'virtual:generated-layouts'
+import Previewer from 'virtual:vue-component-preview'
 import App from './App.vue'
 import type { UserModule } from './types'
 import generatedRoutes from '~pages'
@ -18,5 +19,6 @@ export const createApp = ViteSSG(
    // install all modules under `modules/`
    Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
      .forEach(i => i.install?.(ctx))
+    ctx.app.use(Previewer)
  },
 )
--- a/tsconfig.json
+++ b/tsconfig.json
@ -19,6 +19,7 @@
      "vite/client",
      "vue/ref-macros",
      "vite-plugin-pages/client",
+      "vite-plugin-vue-component-preview/client",
      "vite-plugin-vue-layouts/client"
    ],
    "paths": {
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,5 +1,6 @@
 import path from 'path'
 import { defineConfig } from 'vite'
+import Preview from 'vite-plugin-vue-component-preview'
 import Vue from '@vitejs/plugin-vue'
 import Pages from 'vite-plugin-pages'
 import generateSitemap from 'vite-ssg-sitemap'
@ -22,6 +23,8 @@ export default defineConfig({
  },

  plugins: [
+    Preview(),
+
    Vue({
      include: [/\.vue$/, /\.md$/],
      reactivityTransform: true,