Vant 3.0: Comprehensive Vue 3 Migration and New Features

Vant 3.0, developed over eight months, represents a comprehensive migration to Vue 3 with significant improvements to the codebase and ecosystem. The update focuses on embracing Vue 3's new features including Composition API, emits option, and Teleport.

Key improvements include: refactoring all components using Composition API for better logic reuse and code readability; rewriting all documentation and examples with Composition API; adding emits options for better event handling; removing all mixins; and supporting teleport properties for modal components. These changes resulted in a 16.6% reduction in JS bundle size, with Gzip size reduced to 67.5kb.

The release introduces three new components: Badge for displaying numeric badges or red dots, Popover for bubble-style menus, and Cascader for multi-level selection (e.g., province-city-district). These components are also available in Vant 2.12 for Vue 2 users.

Vant Use 1.0 is introduced as a new Composition API library, extracting common logic from Vant components for greater flexibility. For example, the CountDown component's logic is abstracted into a useCountDown method, allowing custom UI styling and computed property usage.

Vant Cli 3.0 receives major updates including Vue 3, VueRouter 4, VueLoader 16, Webpack 5 with persistent caching, Docsearch 3, TypeScript 4, and ESLint 7. Users can choose between Vue 2 or Vue 3 when creating new projects.

Two new Vant Demo projects demonstrate Vue 3 + Vant 3 + Vue CLI and Vue 3 + Vant 3 + Vite setups. The Vite example highlights that Tree Shaking automatically handles unused ESM modules, though unused component styles still need manual handling.

Currently, the official documentation defaults to Vant 2, with Vant 3 accessible via a version switcher. npm's latest tag remains on v2, requiring npm install vant@next for Vant 3. The team plans to maintain both versions for 6-12 months before gradually shifting focus to Vant 3.

Community-maintained versions include React and Alipay Mini Program variants. The team thanks contributors and looks forward to continued development in the coming year.