docs: add new VitePress stuff

docs/.vitepress/config.ts

@@ -308,6 +308,7 @@ function prepareSidebar(idx: number) {
 const ogUrl = 'https://vite-plugin-pwa.netlify.app/'
 const ogImage = 'https://vite-plugin-pwa.netlify.app/og-image.png'
 
+// @ts-expect-error avoid TS2321: Excessive stack depth comparing types
 export default defineConfig({
   lang: 'en-US',
   title: 'Vite Plugin PWA',
@@ -410,7 +411,10 @@ export default defineConfig({
     },
   },
   vite: {
-    plugins: [VitePWAPlugin],
+    plugins: [
+      // @ts-expect-error Vite 2 types in Vite 3
+      VitePWAPlugin,
+    ],
   },
   buildEnd,
 })

docs/examples/vitepress.md

@@ -12,3 +12,8 @@ To run this site on your local, execute the following script from your shell (fr
 ```shell
 pnpm run docs:serve
 ```
+
+::: warning
+Vite Plugin PWA docs is using latest version of `VitePress`, it is using `Vite 3+`.
+:::
+

docs/frameworks/vitepress.md

@@ -13,6 +13,107 @@ on top of [Vite](https://vitejs.dev/), the integration with this plugin is grace
 Using `VitePress 1.0.0-alpha.5+` will require `Vite 3+`.
 :::
 
+The latest version of `VitePress` includes a `buildEnd` hook that will allow us to configure the PWA plugin directly in the `VitePress config.ts` module.
+
+PWA plugin provides `VitePress` integration via `VitePressPWA`, which will provide the PWA plugin itself and the `VitePress buildEnd` hook.
+
+You will need to import `VitePressPWA` instead `VitePWA` from `vite-pwa-plugin`:
+```ts
+import { VitePressPWA } from 'vite-pwa-plugin'
+```
+
+then, in `VitePress` configuration module, use `VitePressPWA` to get `VitePWAPlugin` and the `VitePress buildEnd` hook:
+``` ts
+// .vitepress/config.ts
+import { defineConfig } from 'vitepress'
+import { VitePressPWA } from 'vite-pwa-plugin'
+const { VitePWAPlugin, buildEnd } = VitePressPWA({
+  // pwa options
+})
+
+export default defineConfig({
+  // VitePress options
+  ...
+  vite: {
+    plugins: [
+      // @ts-expect-error Vite 2 types in Vite 3
+      VitePWAPlugin
+    ]
+  },
+  buildEnd
+})
+```
+
+If you need to add some other process to the `VitePress buildEnd` hook, like `optimizing pages` or `generating the sitemap`, you can include them with a custom `VitePress buildEnd` hook (make sure to always run the PWA `buildEnd` hook last):
+``` ts
+// .vitepress/config.ts
+import { defineConfig } from 'vitepress'
+import { VitePressPWA } from 'vite-pwa-plugin'
+const optimizePages = async () => {
+  // some logic
+}
+
+const siteMap = async (siteConfig: any) => {
+  // generate site map
+}
+
+const { VitePWAPlugin, buildEnd: pwaBuildEnd } = VitePressPWA({
+  // pwa options
+})
+
+export default defineConfig({
+  // VitePress options
+  ...
+  vite: {
+    plugins: [
+      // @ts-expect-error Vite 2 types in Vite 3
+      VitePWAPlugin
+    ]
+  },
+  async buildEnd(siteConfig: any) {
+    await optimizePages()
+    await siteMap(siteConfig)
+    await pwaBuildEnd()
+  }
+})
+```
+
+or you can configure your logic using the `integrationHook` PWA plugin option (pwa regeneration will always run after the `integrationHook`):
+
+``` ts
+// .vitepress/config.ts
+import { defineConfig } from 'vitepress'
+import { VitePressPWA } from 'vite-pwa-plugin'
+
+const optimizePages = async () => {
+  // some logic
+}
+
+const siteMap = async (siteConfig: any) => {
+  // generate site map
+}
+
+const { VitePWAPlugin, buildEnd } = VitePressPWA({
+  // pwa options
+  async integrationHook(siteConfig: any) {
+    await optimizePages()
+    await siteMap(siteConfig)
+  }
+})
+
+export default defineConfig({
+  // VitePress options
+  ...
+  vite: {
+    plugins: [
+      // @ts-expect-error Vite 2 types in Vite 3
+      VitePWAPlugin
+    ]
+  },
+  buildEnd
+})
+```
+
 ## Old VitePress
 
 Just follow the [Getting Started](/guide/) section and use one of the `registerType` option to configure