When to use this skill
Use this skill whenever the user wants to:
- Build mobile Vue 3 applications with Vant components
- Use Vant UI components (Button, Cell, Form, Dialog, Toast, etc.)
- Create mobile-friendly interfaces
- Customize Vant theme
- Implement internationalization with Vant
- Use Vant with TypeScript
- Handle mobile gestures and interactions
- Implement mobile navigation patterns
- Use mobile form components
- Create mobile data display components
How to use this skill
This skill is organized to match the Vant Vue 3.0 official documentation structure (https://vant-ui.github.io/vant/#/zh-CN). When working with Vant:
Identify the topic from the user's request:
- Getting started/快速开始 →
examples/getting-started/installation.md or examples/getting-started/basic-usage.md
- Button/按钮 →
examples/components/button.md
- Cell/单元格 →
examples/components/cell.md
- Form/表单 →
examples/components/form.md
- Dialog/对话框 →
examples/components/dialog.md
- Toast/提示 →
examples/components/toast.md
- Popup/弹出层 →
examples/components/popup.md
- Theme/主题 →
examples/advanced/theme-customization.md
Load the appropriate example file from the examples/ directory:
Getting Started (快速开始) - examples/getting-started/:
examples/getting-started/installation.md - Installing Vant and basic setup
examples/getting-started/basic-usage.md - Basic component usage
Components (组件) - examples/components/:
examples/components/button.md - Button component
examples/components/cell.md - Cell component
examples/components/icon.md - Icon component
examples/components/image.md - Image component
examples/components/popup.md - Popup component
examples/components/toast.md - Toast component
examples/components/dialog.md - Dialog component
examples/components/form.md - Form component
examples/components/field.md - Field component
examples/components/picker.md - Picker component
examples/components/calendar.md - Calendar component
examples/components/tabs.md - Tabs component
examples/components/tabbar.md - Tabbar component
examples/components/navbar.md - Navbar component
examples/components/list.md - List component
examples/components/grid.md - Grid component
examples/components/card.md - Card component
examples/components/badge.md - Badge component
examples/components/loading.md - Loading component
examples/components/action-sheet.md - ActionSheet component
Advanced (高级) - examples/advanced/:
examples/advanced/theme-customization.md - Customizing Vant theme
examples/advanced/internationalization.md - Internationalization setup
examples/advanced/typescript.md - TypeScript support
Follow the specific instructions in that example file for syntax, structure, and best practices
Important Notes:
- All examples follow Vant Vue 3.0 API
- Examples use Composition API syntax
- Each example file includes key concepts, code examples, and key points
- Always check the example file for best practices and common patterns
- Vant is optimized for mobile devices
Reference API documentation in the api/ directory when needed:
api/components.md - Component API reference
api/config-provider.md - ConfigProvider API
api/hooks.md - Composition Hooks API
Use templates from the templates/ directory:
templates/project-setup.md - Project setup templates
templates/component-template.md - Component usage templates
Doc mapping (one-to-one with official documentation)
Guide (指南):
Components (组件):
Examples and Templates
This skill includes detailed examples organized to match the official documentation structure. All examples are in the examples/ directory (see mapping above).
To use examples:
- Identify the topic from the user's request
- Load the appropriate example file from the mapping above
- Follow the instructions, syntax, and best practices in that file
- Adapt the code examples to your specific use case
To use templates:
- Reference templates in
templates/ directory for common scaffolding
- Adapt templates to your specific needs and coding style
API Reference
Detailed API documentation is available in the api/ directory, organized to match the official Vant Vue 3.0 API documentation structure:
Components API (api/components.md)
- All component props and APIs
- Component events and slots
- Component types and interfaces
ConfigProvider API (api/config-provider.md)
- ConfigProvider component API
- Global configuration options
- Theme configuration
Hooks API (api/hooks.md)
- Composition hooks (useClickAway, useWindowSize, etc.)
- Utility hooks
To use API reference:
- Identify the API you need help with
- Load the corresponding API file from the
api/ directory
- Find the API signature, parameters, return type, and examples
- Reference the linked example files for detailed usage patterns
- All API files include links to relevant example files in the
examples/ directory
Best Practices
- Import Vant CSS: Import Vant CSS in your entry file
- Use Composition API: Prefer Composition API for Vue 3 projects
- Tree-shaking: Import components individually for better tree-shaking
- Mobile-first: Design for mobile devices first
- Touch interactions: Consider touch gestures and interactions
- Performance: Optimize for mobile performance
- Theme customization: Use CSS variables for consistent theming
- Internationalization: Use ConfigProvider with locale for i18n
- TypeScript: Use TypeScript for better type safety
- Component composition: Compose components for complex UIs
Resources
Keywords
Vant, Vant Vue 3, mobile UI, Vue 3, components, Button, Cell, Form, Dialog, Toast, Popup, Tabs, Tabbar, Navbar, theme, customization, internationalization, i18n, TypeScript, 组件库, 按钮, 单元格, 表单, 对话框, 提示, 弹出层, 标签页, 标签栏, 导航栏, 主题定制, 国际化
1---2name: vant-vue33description: Provides comprehensive guidance for Vant Vue 3 mobile component library including mobile components, themes, and best practices. Use when the user asks about Vant, needs to build mobile applications with Vue 3, or implement mobile UI components.4license: Complete terms in LICENSE.txt5---6
7## When to use this skill
8
9Use this skill whenever the user wants to:
10- Build mobile Vue 3 applications with Vant components
11- Use Vant UI components (Button, Cell, Form, Dialog, Toast, etc.)
12- Create mobile-friendly interfaces
13- Customize Vant theme
14- Implement internationalization with Vant
15- Use Vant with TypeScript
16- Handle mobile gestures and interactions
17- Implement mobile navigation patterns
18- Use mobile form components
19- Create mobile data display components
20
21## How to use this skill
22
23This skill is organized to match the Vant Vue 3.0 official documentation structure (https://vant-ui.github.io/vant/#/zh-CN). When working with Vant:
24
251. **Identify the topic** from the user's request:
26 - Getting started/快速开始 → `examples/getting-started/installation.md` or `examples/getting-started/basic-usage.md`
27 - Button/按钮 → `examples/components/button.md`
28 - Cell/单元格 → `examples/components/cell.md`
29 - Form/表单 → `examples/components/form.md`
30 - Dialog/对话框 → `examples/components/dialog.md`
31 - Toast/提示 → `examples/components/toast.md`
32 - Popup/弹出层 → `examples/components/popup.md`
33 - Theme/主题 → `examples/advanced/theme-customization.md`
34
352. **Load the appropriate example file** from the `examples/` directory:
36
37 **Getting Started (快速开始) - `examples/getting-started/`**:
38 - `examples/getting-started/installation.md` - Installing Vant and basic setup
39 - `examples/getting-started/basic-usage.md` - Basic component usage
40
41 **Components (组件) - `examples/components/`**:
42 - `examples/components/button.md` - Button component
43 - `examples/components/cell.md` - Cell component
44 - `examples/components/icon.md` - Icon component
45 - `examples/components/image.md` - Image component
46 - `examples/components/popup.md` - Popup component
47 - `examples/components/toast.md` - Toast component
48 - `examples/components/dialog.md` - Dialog component
49 - `examples/components/form.md` - Form component
50 - `examples/components/field.md` - Field component
51 - `examples/components/picker.md` - Picker component
52 - `examples/components/calendar.md` - Calendar component
53 - `examples/components/tabs.md` - Tabs component
54 - `examples/components/tabbar.md` - Tabbar component
55 - `examples/components/navbar.md` - Navbar component
56 - `examples/components/list.md` - List component
57 - `examples/components/grid.md` - Grid component
58 - `examples/components/card.md` - Card component
59 - `examples/components/badge.md` - Badge component
60 - `examples/components/loading.md` - Loading component
61 - `examples/components/action-sheet.md` - ActionSheet component
62
63 **Advanced (高级) - `examples/advanced/`**:
64 - `examples/advanced/theme-customization.md` - Customizing Vant theme
65 - `examples/advanced/internationalization.md` - Internationalization setup
66 - `examples/advanced/typescript.md` - TypeScript support
67
683. **Follow the specific instructions** in that example file for syntax, structure, and best practices
69
70 **Important Notes**:
71 - All examples follow Vant Vue 3.0 API
72 - Examples use Composition API syntax
73 - Each example file includes key concepts, code examples, and key points
74 - Always check the example file for best practices and common patterns
75 - Vant is optimized for mobile devices
76
774. **Reference API documentation** in the `api/` directory when needed:
78 - `api/components.md` - Component API reference
79 - `api/config-provider.md` - ConfigProvider API
80 - `api/hooks.md` - Composition Hooks API
81
825. **Use templates** from the `templates/` directory:
83 - `templates/project-setup.md` - Project setup templates
84 - `templates/component-template.md` - Component usage templates
85
86
87### Doc mapping (one-to-one with official documentation)
88
89**Guide (指南)**:
90- See guide files in `examples/guide/` or `examples/getting-started/` → https://vant-ui.github.io/vant/#/zh-CN
91
92**Components (组件)**:
93- See component files in `examples/components/` → https://vant-ui.github.io/vant/#/zh-CN
94
95## Examples and Templates
96
97This skill includes detailed examples organized to match the official documentation structure. All examples are in the `examples/` directory (see mapping above).
98
99**To use examples:**
100- Identify the topic from the user's request
101- Load the appropriate example file from the mapping above
102- Follow the instructions, syntax, and best practices in that file
103- Adapt the code examples to your specific use case
104
105**To use templates:**
106- Reference templates in `templates/` directory for common scaffolding
107- Adapt templates to your specific needs and coding style
108
109## API Reference
110
111Detailed API documentation is available in the `api/` directory, organized to match the official Vant Vue 3.0 API documentation structure:
112
113### Components API (`api/components.md`)
114- All component props and APIs
115- Component events and slots
116- Component types and interfaces
117
118### ConfigProvider API (`api/config-provider.md`)
119- ConfigProvider component API
120- Global configuration options
121- Theme configuration
122
123### Hooks API (`api/hooks.md`)
124- Composition hooks (useClickAway, useWindowSize, etc.)
125- Utility hooks
126
127**To use API reference:**
1281. Identify the API you need help with
1292. Load the corresponding API file from the `api/` directory
1303. Find the API signature, parameters, return type, and examples
1314. Reference the linked example files for detailed usage patterns
1325. All API files include links to relevant example files in the `examples/` directory
133
134## Best Practices
135
1361. **Import Vant CSS**: Import Vant CSS in your entry file
1372. **Use Composition API**: Prefer Composition API for Vue 3 projects
1383. **Tree-shaking**: Import components individually for better tree-shaking
1394. **Mobile-first**: Design for mobile devices first
1405. **Touch interactions**: Consider touch gestures and interactions
1416. **Performance**: Optimize for mobile performance
1427. **Theme customization**: Use CSS variables for consistent theming
1438. **Internationalization**: Use ConfigProvider with locale for i18n
1449. **TypeScript**: Use TypeScript for better type safety
14510. **Component composition**: Compose components for complex UIs
146
147## Resources
148
149- **Official Website**: https://vant-ui.github.io/
150- **Documentation**: https://vant-ui.github.io/vant/#/zh-CN
151- **GitHub Repository**: https://github.com/youzan/vant
152
153## Keywords
154
155Vant, Vant Vue 3, mobile UI, Vue 3, components, Button, Cell, Form, Dialog, Toast, Popup, Tabs, Tabbar, Navbar, theme, customization, internationalization, i18n, TypeScript, 组件库, 按钮, 单元格, 表单, 对话框, 提示, 弹出层, 标签页, 标签栏, 导航栏, 主题定制, 国际化