Socket
Socket
Sign inDemoInstall

vant

Package Overview
Dependencies
23
Maintainers
7
Versions
558
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    vant

Mobile UI Components built on Vue


Version published
Maintainers
7
Install size
5.77 MB
Created

Readme

Source

logo

Vant

A lightweight, customizable Vue UI library for mobile web apps.

npm version Coverage Status downloads Gzip Size

πŸ”₯ ζ–‡ζ‘£η½‘η«™οΌˆε›½ε†…οΌ‰ Β  🌈 ζ–‡ζ‘£η½‘η«™οΌˆGitHubοΌ‰ Β  πŸ‡¨πŸ‡³ δΈ­ζ–‡η‰ˆδ»‹η»


Features

  • πŸš€ 1KB Component average size (min+gzip)
  • πŸš€ 80+ High quality components
  • πŸš€ Zero third-party dependencies
  • πŸ’ͺ 90%+ Unit test coverage
  • πŸ’ͺ Written in TypeScript
  • πŸ“– Extensive documentation and demos
  • πŸ“– Provide Sketch and Axure design resources
  • 🍭 Support Vue 2 & Vue 3
  • 🍭 Support Nuxt 2 & Nuxt 3, provide Vant Module for Nuxt
  • 🍭 Support Tree Shaking
  • 🍭 Support Custom Theme
  • 🍭 Support Accessibility (still improving)
  • 🍭 Support Dark Mode
  • 🍭 Support SSR
  • 🌍 Support i18n, built-in 30+ languages

Install

Using npm to install:

# install latest Vant for Vue 3 project
npm i vant

# install Vant 2 for Vue 2 project
npm i vant@latest-v2

Using yarn, pnpm, or bun:

# with yarn
yarn add vant

# with pnpm
pnpm add vant

# with Bun
bun add vant

Scaffold

It is recommended to use Rsbuild to create a scaffold project.

Rsbuild is a build tool based on Rspack, developed by the author of Vant, with first-class build speed and development experience, providing first-priority support for Vant.

You can create a Rsbuild project with the following command:

npm create rsbuild@latest

Please visit the Rsbuild repository for more information.

Quickstart

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);

See more in Quickstart.

Browser Support

Vant 2 supports modern browsers and Android >= 4.0、iOS >= 8.0.

Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).

Official Ecosystem

ProjectDescription
vant-weappWeChat MiniProgram UI
vant-demoCollection of Vant demos
vant-cliScaffold for UI library
vant-iconsVant icons
vant-touch-emulatorUsing vant in desktop browsers
vant-nuxtVant module for Nuxt

Community Ecosystem

ProjectDescription
3lang3/react-vantReact mobile UI Components based on Vant
vant-aliappAlipay MiniProgram UI
taroifyVant Taro
vant-themeOnline theme preview built on Vant UI
@antmjs/vantuiMobile UI Components based on Vant, supporting Taro and React
vant-playgroundVant Playground
sfc-playground-vantVant Playground
vue3-h5-templateMobile project template based on Vant
vue3-vant-mobileMobile project template based on Vant
vscode-common-intellisenseA VS Code extension that provides better intellisense to Vant developers

Preview

You can scan the following QR code to access the demo:

Core Team

Core contributors of Vant and Vant Weapp:

chenjiahancookfrontw91pangxie1991rex-zsdnemo-shen
chenjiahancookfrontwangnaiyipangxierex-zsdnemo-shen
LindysenJakeLaoyulandluckwjw-gavininottnzhousg
LindysenJakeLaoyulandluckwjw-gavininottnzhousg

All Contributors

Thanks to the following friends for their contributions to Vant:

contributors

Contribution Guide

Please make sure to read the Contributing Guide before making a pull request.

Start On Web IDE

https://github.dev/youzan/vant

LICENSE

Vant is MIT licensed.

Keywords

FAQs

Last updated on 06 Apr 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚑️ by Socket Inc