Skip to content
Get packs

Guide · Open source

How to use Vant: install, import components and theme

Updated · written with AI from the project's own documentation and checked against our catalogue data

Vant is a Vue UI library of ready-made interface components aimed at mobile web apps. This guide shows you how to install it into a Vue project, import and register the components you need, and find the official resources for theming and Nuxt. You do not need to have built a UI library before to follow it.

Vantyouzan/vant · ★ 24.4k · MIT

Quick start

  1. 1Check your project. Confirm you have Node.js installed and an existing Vue project. Use Vue 3 for the latest Vant, or Vue 2 for Vant 2.
  2. 2Install Vant. Run npm i vant for Vue 3, or npm i vant@latest-v2 for Vue 2 in your project folder.
  3. 3Import a component. Import the component you need, such as Button, from vant in your entry file.
  4. 4Import the stylesheet. Add import 'vant/lib/index.css' so the component styles load.
  5. 5Register the component. Call app.use with the imported component to register it in your Vue app.
  6. 6Read the docs for more. Open the Vant documentation for the full component list, theming and demos.

What Vant is and who it is for

Vant is a collection of prebuilt interface pieces such as buttons, forms and lists for Vue. Instead of building each one from scratch, you import the parts you need into your project.

It is described as a lightweight, customizable Vue UI library for mobile web apps, and it is written in TypeScript. It is a good fit for teams building mobile-first web apps or H5 pages in Vue.

  • Use it for mobile-first websites and H5 pages.
  • Pick Vant 2 for Vue 2 projects and Vant for Vue 3 projects.
  • Do not use it for desktop-first admin dashboards, React projects, or WeChat Mini Programs; the README points to other projects for those.

Install Vant with npm, yarn, pnpm or bun

You need Node.js and an existing Vue project. The README does not specify a Node.js version. For a Vue 3 project, install the latest Vant. For a Vue 2 project, install Vant 2.

The README also shows yarn, pnpm and Bun equivalents if you prefer them.

  • Vue 3 project: use the latest Vant package.
  • Vue 2 project: use the Vant 2 version tag from the README.
# install latest Vant for Vue 3 project npm i vant # install Vant 2 for Vue 2 project npm i vant@latest-v2 # with yarn yarn add vant # with pnpm pnpm add vant # with Bun bun add vant

Import and register a component

Vant works by importing components you need and registering them with your Vue app. The README's Quickstart imports a Button, imports the component stylesheet, and registers the component with app.use.

The Quickstart code in the README creates the app with createApp() and no arguments. In a real project you would pass your root component, so treat the snippet as the pattern for importing and registering rather than a complete app.

  • Import only the components you need to keep the bundle small.
  • Import the CSS file from vant/lib/index.css so the styles load.
  • Register each component with app.use() before you use it in templates.
import { createApp } from 'vue'; // 1. Import the components you need import { Button } from 'vant'; // 2. Import the components style import 'vant/lib/index.css'; const app = createApp(); // 3. Register the components you need app.use(Button);

Set up a project with Rsbuild

The README recommends Rsbuild for creating a scaffold project. Rsbuild is a build tool based on Rspack, developed by the author of Vant, and it provides first-priority support for Vant.

To create a scaffold, run the command below. The README points to the Rsbuild repository for more details.

npm create rsbuild@latest

Use Vant with Nuxt

Vant supports Nuxt 2 and Nuxt 3. The README links to the official Vant Module for Nuxt, which is the Vant module for Nuxt project.

Check the Vant Module repository for setup details, since this guide does not cover its configuration.

  • Nuxt 2 and Nuxt 3 are both listed as supported.
  • The official module is the vant-nuxt project.

Customize the theme and check browser support

The README lists custom theme support and dark mode among its features. It also lists i18n with built-in 30+ languages and SSR support. Check the official documentation for how to set these options.

Browser support differs by version. Vant 2 supports modern browsers and Android 4.0 or later and iOS 8.0 or later. Vant 3 and 4 support modern browsers, Chrome 51 or later and iOS 10.0 or later.

  • Custom theme, dark mode, SSR and i18n are listed as features.
  • Vant 2 targets Android 4.0+ and iOS 8.0+.
  • Vant 3/4 targets Chrome 51+ and iOS 10.0+.

What people use it for

  • Building a mobile shopping or store web page in Vue.
  • Making H5 event or landing pages with prebuilt buttons and forms.
  • Starting a mobile-first web app from a template built on Vant, such as the community templates listed in the README.
  • Using Vant with Nuxt through the official Vant Module.

Frequently asked questions

Is Vant free to use?

Yes. Vant is MIT licensed, as stated in the README's license section. Check the LICENSE file in the repository for the full terms.

Which Vue version does Vant support?

Vant supports both Vue 2 and Vue 3. Install the latest Vant for Vue 3 projects, and install vant@latest-v2 for Vue 2 projects.

What do I need before installing Vant?

You need Node.js and an existing Vue project. The README does not specify a Node.js version, so check the official documentation for compatibility.

Can I use Vant with React?

Not directly. The README says the React option is a community port, react-vant, which is based on Vant.

Can Vant be used for WeChat Mini Programs?

The README points to the separate vant-weapp project, described as a WeChat MiniProgram UI, for that use case.

Is Vant good for desktop admin dashboards?

The README describes Vant as built for mobile web apps, so it is a poor fit for desktop-first admin dashboards. Consider a desktop-focused library such as Element Plus or Ant Design Vue instead.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Vant suits teams building mobile-first web apps or H5 pages in Vue, especially if they want prebuilt components with theming and support for Vue 2 or Vue 3. It is less suited to desktop admin dashboards, React projects or WeChat Mini Programs, where other libraries or the vant-weapp project are a better choice.

Install options & downloads