docs: add how to use vite/vue plugins

demo/yun/package.json

@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "nodemon": "^2.0.22",
-    "vite-plugin-inspect": "^0.7.22"
+    "vite-plugin-inspect": "^0.7.22",
+    "vite-plugin-pwa": "^0.14.7"
   }
 }

demo/yun/setup/main.ts

@@ -1,7 +1,10 @@
 import { defineAppSetup } from 'valaxy'
 
-export default defineAppSetup((_ctx) => {
+// eslint-disable-next-line unused-imports/no-unused-vars
+export default defineAppSetup(({ router, isClient }) => {
   // router.isReady().then(async () => {
+  //   if (!isClient)
+  //     return
   //   const { registerSW } = await import('virtual:pwa-register')
   //   registerSW({ immediate: true })
   // })

demo/yun/valaxy.config.ts

@@ -61,9 +61,13 @@ export default defineValaxyConfig<ThemeConfig>({
   },
 
   vite: {
-    // https://github.com/antfu/vite-plugin-inspect
-    // Visit http://localhost:3333/__inspect/ to see the inspector
-    plugins: [Inspect()],
+
+    plugins: [
+      // VitePWA(),
+      // https://github.com/antfu/vite-plugin-inspect
+      // Visit http://localhost:3333/__inspect/ to see the inspector
+      Inspect(),
+    ],
   },
 
   unocss: {

docs/pages/guide/third-party/index.md

@@ -49,7 +49,7 @@ export default defineSiteConfig({
 :::
 
 ::: en
-```ts
+```ts {7}
 // site.config.ts
 import { defineSiteConfig } from 'valaxy'
 

docs/pages/guide/third-party/schema-org.md

@@ -1,5 +1,9 @@
 ---
 title: Schema.org for SEO
+title_zh-CN: Schema.org for SEO
+categories:
+  - Third
+top: 0
 ---
 
 采用 [Schema.org](https://schema.org/) 标准，可以让搜索引擎更好地理解网站内容，从而提高网站在搜索结果中的排名。

docs/pages/guide/third-party/vite-vue.md

@@ -0,0 +1,58 @@
+---
+title: Use Vite/Vue Plugin 
+title_zh-CN: 使用 Vite/Vue 插件
+---
+
+Valaxy 兼容 Vite/Vue 插件，你可以参考以下示例进行使用。
+
+## 使用 Vite 插件
+
+### 使用 vite-plugin-pwa
+
+在 `vite.config.ts` 中添加以下配置：
+
+```ts
+import { defineValaxyConfig } from 'valaxy'
+import type { ThemeConfig } from 'valaxy-theme-yun'
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default defineValaxyConfig<ThemeConfig>({
+  vite: {
+    plugins: [
+      VitePWA(),
+      Inspect(),
+    ],
+  },
+})
+```
+
+```ts
+// setup/main.ts
+import { defineAppSetup } from 'valaxy'
+
+export default defineAppSetup(({ router, isClient }) => {
+  router.isReady().then(async () => {
+    if (!isClient)
+      return
+    const { registerSW } = await import('virtual:pwa-register')
+    registerSW({ immediate: true })
+  })
+})
+```
+
+更多配置请参考 [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa)。
+
+## 使用 Vue 插件
+
+如使用 Element Plus，你可以在 `setup/main.ts` 中添加以下配置：
+
+```ts
+import { defineAppSetup } from 'valaxy'
+
+import ElementPlus from 'element-plus'
+import 'element-plus/lib/theme-chalk/index.css'
+
+export default defineAppSetup(({ app }) => {
+  app.use(ElementPlus)
+})
+```