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, 移动端组件库, 按钮, 单元格, 表单, 对话框, 提示, 弹出层, 主题定制