vant-vue3

name	vant-vue3
description	Provides structured guidance for Vant of Vue 3.0. Use when the user needs Vant with Vue 3, asks about mobile UI components such as Button, Cell, Form, Dialog, Toast, Popup, ConfigProvider, theme customization, project setup, or wants to implement mobile-first interfaces with `vant` or `van-` components. This skill is aligned to the official Vant website and usage guide and should be used as the Vant Vue 3 skill entry.
license	Complete terms in LICENSE.txt

Vant of Vue 3

When to use this skill

Use this skill whenever the user is working with Vant for Vue 3 or asks for:

• Vant installation, setup, or project initialization
• Vue 3 mobile UI implementation with vant
• van-button, van-cell, van-form, van-dialog, van-popup, van-toast
• Vant ConfigProvider, theme variables, or theme customization
• Mobile-first page structure, touch-oriented UI, or form flows based on Vant
• Converting generic Vue 3 UI to Vant component usage
• Reviewing or fixing existing Vant Vue 3 code

Trigger terms include:

• vant
• vant vue3
• Vant of Vue 3.0
• van-button, van-form, van-cell, van-dialog, van-toast, van-popup
• ConfigProvider
• theme-vars
• vant 组件
• Vant 主题定制

Scope and alignment

This skill is aligned to the official Vant documentation entry points:

• Official website: https://vant-ui.github.io/
• Official guide: https://vant-ui.github.io/vant/#/zh-CN

The local skill content only claims coverage for files that actually exist in this skill directory. Do not reference non-existent local files. If the requested Vant component is not covered by a local example file, use the official guide as the primary reference and reuse the closest local pattern.

For the exact local-to-official mapping, read:

• references/official-mapping.md

How to use this skill

Step 1: Identify the request area

Map the user request to one of these areas:

1. Quick start / setup

   • Installing Vant
   • Importing styles
   • Full import vs on-demand import
   • Vue 3 project bootstrap

2. Component implementation

   • Button
   • Cell
   • Form
   • Dialog
   • Toast
   • Popup

3. Global config and theming

   • ConfigProvider
   • theme-vars
   • Theme customization

4. API lookup

   • Common props
   • Component props/events/methods
   • Global config API

5. Template or scaffold

   • Project setup template
   • Reusable component structure

Step 2: Load only the matching files

Use the smallest relevant set of files.

A. Quick start / setup

• examples/getting-started/installation.md
• examples/getting-started/basic-usage.md
• templates/project-setup.md

Use these when the user asks how to install Vant, register components, import CSS, or start a Vue 3 + Vant project.

B. Covered component examples

Use only the component file that matches the user request:

• Button → examples/components/button.md
• Cell → examples/components/cell.md
• Form → examples/components/form.md
• Dialog → examples/components/dialog.md
• Popup → examples/components/popup.md
• Toast → examples/components/toast.md

C. Global config and theme

• api/config-provider.md
• examples/advanced/theme-customization.md

Use these for ConfigProvider, dark/light theme handling, theme-vars, CSS variables, or global UI behavior.

D. API lookup

• api/components.md
• api/config-provider.md

Use these when the user needs prop names, event names, method names, or a quick API summary.

E. Official navigation and coverage boundaries

• references/official-mapping.md

Use this file when:

• You need to confirm what this skill covers locally
• You need to route the user from an official Vant section to a local file
• You need to handle a Vant component that is not yet covered by a local example

Step 3: Follow the response workflow

When answering with this skill:

1. Confirm the target is Vant for Vue 3, not another Vue UI library.
2. Pick the matching local example or API file.
3. Keep code examples in Vue 3 Composition API style.
4. Preserve Vant naming and usage conventions:
   • import from vant
   • use van- components in templates
   • import vant/lib/index.css where setup requires it
5. Prefer mobile-first structure and touch-oriented interaction patterns.
6. If the requested component is not covered locally:
   • say that the local skill does not contain a dedicated example file for that component
   • route via references/official-mapping.md
   • use the official guide as the primary source of truth
   • adapt the closest covered local example style instead of inventing fake local files

Local navigation map

This is the actual local navigation surface for the skill.

Getting started

• examples/getting-started/installation.md
• examples/getting-started/basic-usage.md
• templates/project-setup.md

Components covered locally

• examples/components/button.md
• examples/components/cell.md
• examples/components/form.md
• examples/components/dialog.md
• examples/components/popup.md
• examples/components/toast.md

Theme and global configuration

• api/config-provider.md
• examples/advanced/theme-customization.md

API summaries

• api/components.md
• api/config-provider.md

Official mapping

• references/official-mapping.md

Working rules

Do

• Use only local files that actually exist
• Keep answers anchored to the official Vant guide structure
• Prefer concrete component code over abstract explanation
• Use script setup style for Vue 3 examples unless the user already uses another style
• Mention ConfigProvider when the user asks about global theme or locale-like app-wide config
• Keep code samples runnable and focused

Do not

• Do not reference icon.md, tabs.md, navbar.md, or other files that do not exist in this skill
• Do not pretend this skill has full local coverage for every Vant component
• Do not mix Vant patterns with Element Plus, Ant Design Vue, or other UI libraries
• Do not output generic Vue UI advice when the user explicitly asks for Vant

Answer patterns

If the user asks for setup

Load:

• examples/getting-started/installation.md
• templates/project-setup.md

Return:

• install command
• CSS import
• registration strategy
• minimal Vue 3 + Vant starter

If the user asks for a covered component

Load:

• the matching file under examples/components/
• api/components.md if props/events are involved

Return:

• minimal example first
• then props/events/method notes
• then usage pitfalls if relevant

If the user asks for theme customization

Load:

• api/config-provider.md
• examples/advanced/theme-customization.md

Return:

• ConfigProvider usage
• theme-vars example
• CSS variable strategy
• scope and inheritance notes

If the user asks for an uncovered Vant component

Load:

• references/official-mapping.md
• nearest covered local file

Return:

• explicit note that the local skill has no dedicated example file for that component
• route to the official Vant guide section
• provide a Vant-consistent example following the same conventions used in this skill

Quality checklist

Before responding, verify that:

• the answer is specifically for Vant of Vue 3
• all referenced local files exist
• imports come from vant
• examples use Vue 3 syntax
• setup examples include CSS import where needed
• theme answers use ConfigProvider / theme-vars consistently

Resources

• Official website: https://vant-ui.github.io/
• Official guide: https://vant-ui.github.io/vant/#/zh-CN
• Local official mapping: references/official-mapping.md

Keywords

Vant, Vant Vue 3, Vant of Vue 3.0, Vue 3 mobile UI, van-button, van-cell, van-form, van-dialog, van-toast, van-popup, ConfigProvider, theme-vars, mobile-first UI, Vant theme, Vant setup, Vant component library, vant 组件, vant vue3, 移动端组件库, 按钮, 单元格, 表单, 对话框, 提示, 弹出层, 主题定制

能力边界

✅ 适用场景

• 当你需要使用此技能对应的技术栈时
• 当项目需要遵循最佳实践时
• 当需要快速上手或深入理解核心概念时

⚠️ 需要注意

• 复杂业务逻辑需要结合具体场景调整
• 性能优化需要根据实际数据量评估

❌ 不适用场景

• 不相关的技术栈或框架
• 需要完全自定义的特殊场景

常见陷阱 (Gotchas)

1. 版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
2. 配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
3. 环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
4. 依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
5. 性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题