Using npm to install:
# install latest Vant for Vue 3 project\nnpm i vant\n\n# install Vant 2 for Vue 2 project\nnpm i vant@latest-v2\nUsing yarn, pnpm, or bun:
# with yarn\nyarn add vant\n\n# with pnpm\npnpm add vant\n\n# with Bun\nbun add vant\nIf you need to create a new project, we recommend using Rsbuild, Vite or Nuxt framework.
\nRsbuild 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.
\nYou can create a Rsbuild project with the following command:
\nnpm create rsbuild@latest\nPlease visit the Rsbuild repository for more information.
\nHere are the example projects provided by Vant official. You can clone these projects and copy the code.
\nIf you only need to develop a simple HTML page, you can directly include the CDN links in the HTML file. After that, you can access all the components through the global variable vant.
<!-- import style -->\n<link\n rel="stylesheet"\n href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"\n/>\n\n<!-- import script -->\n<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>\n<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>\n\n<script>\n // Render the Button component\n const app = Vue.createApp({\n template: `<van-button>Button</van-button>`,\n });\n app.use(vant);\n\n // Register Lazyload directive\n app.use(vant.Lazyload);\n\n // Call function component\n vant.showToast('Message');\n\n app.mount('#app');\n</script>\nYou can use Vant through these free CDN services:
\n\nNote: Free CDN is generally used for making prototypes or personal projects. It is not recommended to use free CDN in production environment.
\nFor enterprise developers, we recommend:
\nThe basic usage of Vant components:
\nimport { createApp } from 'vue';\n// 1. Import the components you need\nimport { Button } from 'vant';\n// 2. Import the components style\nimport 'vant/lib/index.css';\n\nconst app = createApp();\n\n// 3. Register the components you need\napp.use(Button);\n\n\nTip: Vant supports Tree Shaking by default, so you don\'t need to configure any plugins, the unused JS code will be removed by Tree Shaking, but CSS styles cannot be optimized by it.
\n
If you are using Rsbuild, Vite, webpack or vue-cli, you can use unplugin-vue-components, this plugin can help you to auto importing components.
\nVant officially wrote an automatic import style parser @vant/auto-import-resolver based on unplugin-vue-components, both of which are used together.
Compared with conventional usage, this method can introduce the CSS style of components on demand, thus reducing part of the code volume, but it will become more cumbersome to use. If the business\'s volume requirements for CSS are not particularly extreme, we recommend a simpler general usage.
\n# with npm\nnpm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D\n\n# with yarn\nyarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D\n\n# with pnpm\npnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D\n\n# with Bun\nbun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D\nFor Rsbuild based project\uFF0Cconfigure the plugin in the rsbuild.config.js file:
import { defineConfig } from '@rsbuild/core';\nimport { pluginVue } from '@rsbuild/plugin-vue';\nimport AutoImport from 'unplugin-auto-import/rspack';\nimport Components from 'unplugin-vue-components/rspack';\nimport { VantResolver } from '@vant/auto-import-resolver';\n\nexport default defineConfig({\n plugins: [pluginVue()],\n tools: {\n rspack: {\n plugins: [\n AutoImport({\n resolvers: [VantResolver()],\n }),\n Components({\n resolvers: [VantResolver()],\n }),\n ],\n },\n },\n});\nFor Vite based project\uFF0Cconfigure the plugin in the vite.config.js file:
import vue from '@vitejs/plugin-vue';\nimport AutoImport from 'unplugin-auto-import/vite';\nimport Components from 'unplugin-vue-components/vite';\nimport { VantResolver } from '@vant/auto-import-resolver';\n\nexport default {\n plugins: [\n vue(),\n AutoImport({\n resolvers: [VantResolver()],\n }),\n Components({\n resolvers: [VantResolver()],\n }),\n ],\n};\nFor vue-cli based project\uFF0Cconfigure the plugin in the vue.config.js file:
const { VantResolver } = require('@vant/auto-import-resolver');\nconst AutoImport = require('unplugin-auto-import/webpack');\nconst Components = require('unplugin-vue-components/webpack');\n\nmodule.exports = {\n configureWebpack: {\n plugins: [\n // When the version of unplugin-vue-components is less than 0.26.0:\n AutoImport({ resolvers: [VantResolver()] }),\n Components({ resolvers: [VantResolver()] }),\n // when the unplugin-vue-components version is greater than or equal to 0.26.0:\n AutoImport.default({ resolvers: [VantResolver()] }),\n Components.default({ resolvers: [VantResolver()] }),\n ],\n },\n};\nFor webpack based project\uFF0Cconfigure the plugin in the webpack.config.js file:
const { VantResolver } = require('@vant/auto-import-resolver');\nconst AutoImport = require('unplugin-auto-import/webpack');\nconst Components = require('unplugin-vue-components/webpack');\n\nmodule.exports = {\n plugins: [\n // When the version of unplugin-vue-components is less than 0.26.0:\n AutoImport({ resolvers: [VantResolver()] }),\n Components({ resolvers: [VantResolver()] }),\n // when the unplugin-vue-components version is greater than or equal to 0.26.0:\n AutoImport.default({ resolvers: [VantResolver()] }),\n Components.default({ resolvers: [VantResolver()] }),\n ],\n};\nThen you can using components from Vant in the template, the unplugin-vue-components will automatically import the corresponding Vant components,@vant/auto-import-resolver The corresponding component style will be automatically introduced.
<template>\n <van-button type="primary" />\n</template>\nunplugin-auto-import will automatically import the corresponding Vant API and styles.
<script>\nshowToast('No need to import showToast')\n</script>\nunplugin-vue-components is not a plug-in officially maintained by Vant, it is recommended to give feedback under the unplugin/unplugin-vue-components repository.unplugin-vue-components is >= 0.26.0, for webpack, vue-cli, and rspack, you need to use ComponentsPlugin.default to register.@vant/auto-import-resolver provides some configuration options. Please refer to the README document for more information.Vant repository.When using Vant in Nuxt 3, you can use vant-nuxt, this module can help you to auto importing components and reduce CSS file size.
\n# with npm\nnpm i @vant/nuxt -D\n\n# with yarn\nyarn add @vant/nuxt -D\n\n# with pnpm\npnpm add @vant/nuxt -D\n\n# with Bun\nbun add @vant/nuxt -D\nadd the module in the nuxt.config.js file:
export default defineNuxtConfig({\n modules: ['@vant/nuxt'],\n});\nThen you can using components from Vant in the template, Go to the Nuxt documentation to learn more.
\n<template>\n <van-button type="primary" @click="showToast('toast')">button</van-button>\n <VanButton type="success" @click="showNotify('notify')">button</VanButton>\n <LazyVanButton type="default">lazy button</LazyVanButton>\n</template>\n