Vant is an open source set of lightweight, reliable mobile component library by the Uzan front-end team.

After eight months of development, Vant 3.0 is finally here. In this iteration, the bulk of our work was to rebuild the entire codehouse and surrounding ecology based on Vue 3 and release Vant 3.0, Vant Cli 3.0, and Vant Use 1.0.

review

As usual, let’s take a quick look at Vant open source so far:

  • Some 270 developers participated in Vant and Vantrepep development and contributed 4,100 Pull requests
  • 7,300 issues were closed and 99.3% were resolved or answered
  • The site is visited 8 million times a month
  • CDN downloads 300 million times a month

Update the content

Vant 3.0: Full Embrace Vue 3 💪

Vue 3 brings a number of exciting new features, such as Composition API, emits Option and Teleport. In Vant 3.0, we fully embraced the changes that Vue 3 brought with it, making the following changes:

  • Refactor all components using the Composition API
  • Rewrite all documents and examples using the Composition API
  • Component added emits option to provide better event prompt
  • Remove all mixins to improve code readability
  • All popover class components support the Teleport property

After refactoring, components can be logically reused between components based on the Composition API, and the code becomes more compressible. Compared to Vant version 2.12, you can see that Vant 3.0’s JS volume has dropped by 16.6% to 67.5 KB after Gzip.

New component: Vant 2, Vant 3 available simultaneously

Vant 3.0 includes three new components:

  • Badge: Used to display a logo number or red dot in the upper right corner.
  • Popover Bubble Popover: A pop-up bubble menu component.
  • Cascader cascade selector: used for multi-level data selection, typical scenario is provincial selection.

Considering that most developers are still developing with Vue 2, we implemented all three components in sync with Vant 2, which you can upgrade to Vant 2.12.

Vant Use: New partner 👬

Vant Use A library of Composition apis precipitated from a Vant. In addition to providing the usual Composition API, Vant Use also strips the logic out of some components, allowing developers to fully customize the presentation of components while working with the component logic.

As a simple example, we can abstract the CountDown logic from the CountDown component into the useCountDown method. The CountDown logic is basically the same as CountDown, but it can be used more flexibly. Or the countdown can be preprocessed through computed computations.

Vant Use is still in its early stages, and as we evolve in the future, we will continue to pull away from the generic logic inside Vant components and sink into Vant Use.

Vant Cli 3.0: Updated, faster 🚀

Vant Cli is a tool for building Vant’s underlying component library. Through the Vant Cli, you can quickly build a set of fully functional Vue component library. In Vant Cli 3.0, we made a major upgrade to all the underlying dependencies to provide a smoother development experience while supporting Vue 3.

  • Upgrade Vue 3, VueRouter 4, and VueLoader 16
  • Update Webpack 5 to enable persistent caching
  • Update Docsearch 3 with a new search box style
  • Upgrade TypeScript 4 and ESLint 7

When creating a Vent-CLI project, you can choose between Vue 2 or Vue 3 for component library development:

Vant Demo: 2 new sample projects

Vant Demo is a collection of sample projects officially provided by Vant. In this iteration, we added two sample projects to demonstrate them respectively:

  • How to Set up an application using Vue 3 + Vant 3 + Vue Cli
  • How to build an application with Vue 3 + Vant 3 + Vite

Many early adopters are already developing in Vite, and one of the things that often confuses people is how to introduce Vant components on demand in Vite. In the Vue Cli, we can import on demand through the babel-plugin-import plug-in, but it is not available in Vite.

There is no need to worry about on-demand import in Vite. Vite automatically removes unused ESM modules through Tree Shaking when building code. All Vant 3.0 internal modules are written based on ESM and have the natural ability to introduce on demand. At this stage, unused component styles cannot be recognized and removed by Tree Shaking, and we will consider supporting them through the Vite plugin.

Start to try

Currently, the Vant website displays the Vant 2 API documentation by default. You can access the Vant 3 documentation by clicking the version switch button in the upper right corner of the website or by clicking 👉.

Meanwhile, Vant’s NPM latest tag also stays on version V2, which means that Vant 2 will still be installed using the NPM install Vant command, while Vant 3 will be installed using the NPM install vant@next command. After the Vue’s default document version and NPM tag are switched to V3, we will also synchronize the switch.

To upgrade from an existing Vant 2 project, see 🚀 Upgrade Guide.

Next step

We’ll be keeping Vant 2 and Vant 3 in sync for the next 6-12 months. As Vue 3 becomes more popular, we will gradually reduce the frequency of Vant 2 maintenance and shift our focus to Vant 3.

In addition to the official Vue version and wechat mini program version, Vant also has React version and Alipay mini program version initiated and maintained by the community. Welcome to participate in the construction of 💪

The extraordinary year of 2020 is coming to an end. I hope Vant can bring a little help to your work. We will see you next year.