docs: add nuxt 3 guide (#10977)

youzan · Aug 27, 2022 · 95542bf · 95542bf
1 parent 8d15fa4
commit 95542bf
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md
@@ -212,3 +212,24 @@ import 'vant/es/image-preview/style';
 ```
 
 > Tip: "Full Import" and "On-demand Import" should not be used at the same time, otherwise it will lead to problems such as code duplication and style overrides.
+
+## With Frameworks
+
+### Use Vant in Nuxt 3
+
+When using Vant in Nuxt 3, you should add `/vant/` to the `build.transpile`:
+
+```ts
+import { defineNuxtConfig } from 'nuxt';
+
+export default defineNuxtConfig({
+  build: {
+    transpile: [/vant/],
+  },
+});
+```
+
+Reference:
+
+- [nuxt/framework#6761](https://github.com/nuxt/framework/issues/6761)
+- [nuxt/framework#4084](https://github.com/nuxt/framework/issues/4084)
diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md
@@ -217,3 +217,24 @@ import 'vant/es/image-preview/style';
 ```
 
 > 提示：在单个项目中不应该同时使用「全量引入」和「按需引入」，否则会导致代码重复、样式错乱等问题。
+
+## 在框架中使用
+
+### 在 Nuxt 3 中使用
+
+在 Nuxt 3 中使用 Vant 时，由于 Nuxt 3 框架本身的限制，需要在 `nuxt.config.ts` 中添加以下配置：
+
+```ts
+import { defineNuxtConfig } from 'nuxt';
+
+export default defineNuxtConfig({
+  build: {
+    transpile: [/vant/],
+  },
+});
+```
+
+关于该问题的背景，可以参考以下 issue：
+
+- [nuxt/framework#6761](https://github.com/nuxt/framework/issues/6761)
+- [nuxt/framework#4084](https://github.com/nuxt/framework/issues/4084)