vant

library4.9.24jsnpmunverified

Vant is a lightweight and highly customizable UI component library designed for mobile web applications built with Vue.js. The current stable version series is 4.x, specifically 4.9.24 for Vue 3 projects, while Vant 2.x (e.g., 2.13.9) continues to support Vue 2. The library maintains an active release cadence, frequently adding new features, bug fixes, and improvements within its major versions. Key differentiators include its small bundle size (1KB average per component min+gzip), over 80 high-quality components, zero third-party dependencies, strong TypeScript support, extensive documentation, and comprehensive feature set including tree-shaking, custom themes, accessibility, dark mode, SSR, and i18n with 30+ built-in languages. It also provides dedicated modules for Nuxt 2 and Nuxt 3.

web-framework

github ↗package ↗homepage ↗

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Vant supports tree-shaking, so named imports are recommended. Manual import of specific components is also possible, but `vant` exports components directly for convenience.

import { Button } from 'vant';

The core CSS styles are crucial for Vant components to render correctly. This import should be placed globally or at the root of your application. Ensure your build tool handles CSS imports.

import 'vant/lib/index.css';

For global locale configuration, import `Locale` and use its `use` method. This sets the language for all Vant components.

import { Locale } from 'vant'; Locale.use('en-US');

This quickstart demonstrates how to set up a basic Vue 3 application, import Vant components (Button, Toast), register them globally, and include the necessary CSS styles to render a functional Vant button and show a toast message.

import { createApp } from 'vue'; import { Button, Toast } from 'vant'; import 'vant/lib/index.css'; const app = createApp({ template: ` <van-button type="primary" @click="showToast">Click me</van-button> `, methods: { showToast() { Toast('Hello Vant!'); } } }); app.use(Button); app.use(Toast); app.mount('#app');

Debug

Known footguns

breakingVant 3.x and 4.x are designed for Vue 3. Migrating from Vant 2.x (Vue 2) to Vant 3.x/4.x requires upgrading your Vue project to Vue 3, which involves significant breaking changes in Vue itself.

gotchaForgetting to import the global Vant CSS file (`vant/lib/index.css`) will result in components rendering without any styling, appearing as plain HTML elements.

gotchaWhen using on-demand import (e.g., with `unplugin-vue-components` or `vite-plugin-components`), ensure the Vant resolver is correctly configured, otherwise components might not be automatically imported or their styles may be missing.

deprecatedOlder versions of Vant might have exposed components directly via `vant/es/{componentName}`, but the recommended and tree-shakable way is to use named imports from the main `vant` package.

gotchaVant components are designed for mobile environments. Using them directly in desktop browsers might lead to unexpected layout or interaction issues without `vant-touch-emulator` or proper desktop styling.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

27 hits · last 30 days

ahrefsbot

amazonbot

gptbot

googlebot

script

mj12bot

duckduckgo

chatgpt-user

oai-searchbot

Resources

githubhttps://github.com/vant-ui/vant ↗

packagehttps://www.npmjs.com/package/vant ↗

homepagehttps://vant-ui.github.io/vant ↗