docs: add an introduction to van-nuxt (#11588)

* docs: add an introduction to van-nuxt

* fix: typo

README.md

@@ -99,6 +99,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
 | [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | Scaffold for UI library |
 | [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant icons |
 | [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | Using vant in desktop browsers |
+| [vant-nuxt](https://github.com/vant-ui/vant-nuxt) | Vant module for Nuxt |
 
 ## Community Ecosystem
 

README.zh-CN.md

@@ -105,6 +105,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 | [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 |
 | [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant 图标库 |
 | [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
+| [vant-nuxt](https://github.com/vant-ui/vant-nuxt) | 为 Nuxt 准备的模块 |
 
 ## 社区生态
 

packages/vant/docs/markdown/home.en-US.md

@@ -56,6 +56,7 @@ The current maintenance status of each version of Vant is as follows:
 | [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | Scaffold for UI library |
 | [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant icons |
 | [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | Using vant in desktop browsers |
+| [vant-nuxt](https://github.com/vant-ui/vant-nuxt) | Vant module for Nuxt |
 
 ### Community Ecosystem
 

packages/vant/docs/markdown/home.zh-CN.md

@@ -68,6 +68,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 | [vant-cli](https://github.com/vant-ui/vant/tree/main/packages/vant-cli) | 开箱即用的组件库搭建工具 |
 | [vant-icons](https://github.com/vant-ui/vant/tree/main/packages/vant-icons) | Vant 图标库 |
 | [vant-touch-emulator](https://github.com/vant-ui/vant/tree/main/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
+| [vant-nuxt](https://github.com/vant-ui/vant-nuxt) | 为 Nuxt 准备的模块 |
 
 ### 社区生态
 

packages/vant/docs/markdown/quickstart.en-US.md

@@ -222,19 +222,39 @@ import 'vant/es/image-preview/style';
 
 ### Use Vant in Nuxt 3
 
-When using Vant in Nuxt 3, you should add `/vant/` to the `build.transpile`:
+When using Vant in Nuxt 3, you can use [vant-nuxt](https://github.com/vant-ui/vant-nuxt), this module can help you to auto importing components and reduce CSS file size.
 
-```ts
-import { defineNuxtConfig } from 'nuxt';
+#### 1. Install Module
 
+```bash
+# with npm
+npm i @vant/nuxt -D
+
+# with yarn
+yarn add @vant/nuxt -D
+
+# with pnpm
+pnpm add @vant/nuxt -D
+```
+
+#### 2. Add Module
+
+add the module in the `nuxt.config.js` file:
+
+```js
 export default defineNuxtConfig({
-  experimental: {
-    externalVue: true,
-  },
+  modules: ['@vant/nuxt'],
 });
 ```
 
-Reference:
+#### 3. Using Components
 
-- [nuxt/framework#6761](https://github.com/nuxt/framework/issues/6761)
-- [nuxt/framework#4084](https://github.com/nuxt/framework/issues/4084)
+Then you can using components from Vant in the template, Go to the [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/components) to learn more.
+
+```html
+<template>
+  <van-button type="primary" @click="showToast('toast')">button</van-button>
+  <VanButton type="success" @click="showNotify('notify')">button</VanButton>
+  <LazyVanButton type="default">lazy button</LazyVanButton>
+</template>
+```

packages/vant/docs/markdown/quickstart.zh-CN.md

@@ -226,22 +226,42 @@ import 'vant/es/image-preview/style';
 
 ### 在 Nuxt 3 中使用
 
-在 Nuxt 3 中使用 Vant 时，由于 Nuxt 3 框架本身的限制，需要在 `nuxt.config.ts` 中添加以下配置：
+在 Nuxt 3 中使用 Vant 时，可以使用 [vant-nuxt](https://github.com/vant-ui/vant-nuxt) 模块，它可以自动引入组件，并按需引入的样式（包括函数组件）。
 
-```ts
-import { defineNuxtConfig } from 'nuxt';
+#### 1. 安装模块
 
+```bash
+# 通过 npm 安装
+npm i @vant/nuxt -D
+
+# 通过 yarn 安装
+yarn add @vant/nuxt -D
+
+# 通过 pnpm 安装
+pnpm add @vant/nuxt -D
+```
+
+#### 2. 增加模块
+
+在 `nuxt.config.js` 文件中增加模块：
+
+```js
 export default defineNuxtConfig({
-  experimental: {
-    externalVue: true,
-  },
+  modules: ['@vant/nuxt'],
 });
 ```
 
-关于该问题的背景，可以参考以下 issue：
+#### 3. 使用组件
 
-- [nuxt/framework#6761](https://github.com/nuxt/framework/issues/6761)
-- [nuxt/framework#4084](https://github.com/nuxt/framework/issues/4084)
+完成以上两步，就可以直接在模板中使用 Vant 组件了。前往 [Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/components) 了解更多。
+
+```html
+<template>
+  <van-button type="primary" @click="showToast('toast')">button</van-button>
+  <VanButton type="success" @click="showNotify('notify')">button</VanButton>
+  <LazyVanButton type="default">lazy button</LazyVanButton>
+</template>
+```
 
 ## 迁移提示