Vant Vue3

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 查询等常见问题