docs(vite-ssg/sse): intro

demo/pages/docs/nuxtjs/enUS/index.md

@@ -20,7 +20,7 @@ pnpm dlx nuxi module add nuxtjs-naive-ui
 
 > If you are using this module, make sure:
 >
-> 1. `@css-render/*` and `css-render` packages' version satisfies `>=0.15.4`.
+> 1. `@css-render/*` and `css-render` packages' version satisfies `>=0.15.14`.
 > 2. Each of `@css-render/*` and `css-render` only resolves 1 target. (No different versions of same package & No duplicate for the same version)
 >
 > You can search in lock file for `css-render` to check if there's duplicate.

demo/pages/docs/nuxtjs/zhCN/index.md

@@ -20,7 +20,7 @@ pnpm dlx nuxi module add nuxtjs-naive-ui
 
 > 使用该模块，请确保:
 >
-> 1. `@css-render/*` 和 `css-render` 的版本都 `>=0.15.4`
+> 1. `@css-render/*` 和 `css-render` 的版本都 `>=0.15.14`
 > 2. 每个 `@css-render/*` 和 `css-render` 包最终只都指向一个目标（一个包不会有多个版本，也不会有同一个版本的多个副本）
 >
 > 你可以在 lock file 中搜索 `css-render` 去检查是不是有重复的

demo/pages/docs/ssr/enUS/index.md

@@ -10,6 +10,10 @@ See [Nuxt.js](nuxtjs).
 
 See [Vitepress](vitepress).
 
+## Vite SSG/SSE
+
+See [Vite SSG/SSE](vite-ssge).
+
 ## Vite Example
 
 If you are using Vite, please see [example](https://github.com/07akioni/naive-ui-vite-ssr).

demo/pages/docs/ssr/zhCN/index.md

@@ -10,6 +10,10 @@
 
 参考 [Vitepress](vitepress)。
 
+## Vite SSG/SSE
+
+参考 [Vite SSG/SSE](vite-ssge)。
+
 ## Vite 示例
 
 如果你是用的是 Vite，请参考[例子](https://github.com/07akioni/naive-ui-vite-ssr)。

demo/pages/docs/vite-ssge/enUS/index.md

@@ -0,0 +1,42 @@
+# Vite SSG/SSE
+
+If you are using `vite-sse` or `vite-ssg`. Follow the following steps to setup `naive-ui`.
+
+## 1. Install `naive-ui`, `@css-render/vue3-ssr`
+
+```bash
+# pnpm
+pnpm i naive-ui @css-render/vue3-ssr
+
+# npm
+npm i naive-ui @css-render/vue3-ssr
+```
+
+## 2. Modify `vite.config.ts`
+
+Add following content. If there exists content already, merge them.
+
+```ts
+import { setup } from '@css-render/vue3-ssr'
+
+defineConfig({
+  ssr: {
+    noExternal: ['naive-ui', 'vueuc', 'date-fns']
+  },
+  ssgOptions: {
+    async onBeforePageRender(_, __, appCtx) {
+      const { collect } = setup(appCtx.app)
+      ;(appCtx as any).__collectStyle = collect
+      return undefined
+    },
+    async onPageRendered(_, renderedHTML, appCtx) {
+      return renderedHTML.replace(
+        /<\/head>/,
+        `${(appCtx as any).__collectStyle()}</head>`
+      )
+    }
+  }
+})
+```
+
+Then you can using naive-ui in `vite-ssg` or `vite-sse` project.

demo/pages/docs/vite-ssge/zhCN/index.md

@@ -0,0 +1,42 @@
+# Vite SSG/SSE
+
+如果你正在使用 `vite-sse` 或者 `vite-ssg`，通过下面的步骤设定 `naive-ui`。
+
+## 1. 安装 `naive-ui`、`@css-render/vue3-ssr`
+
+```bash
+# pnpm
+pnpm i naive-ui @css-render/vue3-ssr
+
+# npm
+npm i naive-ui @css-render/vue3-ssr
+```
+
+## 2. 修改 `vite.config.ts`
+
+增加下列内容，如果已经存在一些内容，则合并他们。
+
+```ts
+import { setup } from '@css-render/vue3-ssr'
+
+defineConfig({
+  ssr: {
+    noExternal: ['naive-ui', 'vueuc', 'date-fns']
+  },
+  ssgOptions: {
+    async onBeforePageRender(_, __, appCtx) {
+      const { collect } = setup(appCtx.app)
+      ;(appCtx as any).__collectStyle = collect
+      return undefined
+    },
+    async onPageRendered(_, renderedHTML, appCtx) {
+      return renderedHTML.replace(
+        /<\/head>/,
+        `${(appCtx as any).__collectStyle()}</head>`
+      )
+    }
+  }
+})
+```
+
+现在你可以在 `vite-ssg` 或 `vite-sse` 项目中使用 `naive-ui` 了。

demo/routes/routes.js

@@ -60,6 +60,10 @@ export const enDocRoutes = [
     path: 'vitepress',
     component: () => import('../pages/docs/vitepress/enUS/index.md')
   },
+  {
+    path: 'vite-ssge',
+    component: () => import('../pages/docs/vite-ssge/enUS/index.md')
+  },
   {
     path: 'common-issues',
     component: () => import('../pages/docs/common-issues/enUS/index.md')
@@ -149,6 +153,10 @@ export const zhDocRoutes = [
     path: 'vitepress',
     component: () => import('../pages/docs/vitepress/zhCN/index.md')
   },
+  {
+    path: 'vite-ssge',
+    component: () => import('../pages/docs/vite-ssge/zhCN/index.md')
+  },
   {
     path: 'common-issues',
     component: () => import('../pages/docs/common-issues/zhCN/index.md')

demo/store/menu-options.js

@@ -167,6 +167,11 @@ export function createDocumentationMenuOptions ({ lang, theme, mode }) {
           zh: 'Vitepress',
           path: '/vitepress'
         },
+        {
+          en: 'Vite SSG/SSE',
+          zh: 'Vite SSG/SSE',
+          path: '/ssr'
+        },
         {
           en: 'Customizing Theme',
           zh: '调整主题',