Building a Vue Component Library with Vant CLI: Significance, Setup, and Publishing

This article introduces the concept and benefits of a component library, lists common Vue component library frameworks, and explains how to build a custom library using Vant CLI.

Significance of a component library – reduces code duplication, ensures visual and interaction consistency, speeds up development, and simplifies maintenance across projects.

Framework selection – compares popular Vue 3 UI libraries such as element-plus, tdesign-vue-next, arco-design-vue, ant-design-vue, naive-ui, vant, nutui, vuetify, and varlet.

Building the library with Vant CLI – ensure Node version (^12.13.0 || ^14.15.0 || >=16.0.0), then run:

yarn create vant-cli-app

Install the CLI:

npm i @vant/cli -D

yarn add @vant/cli -D

pnpm add @vant/cli -D

Configure scripts in package.json (dev, test, lint, build, release, etc.) and add ESLint and Prettier settings as shown.

Start the project locally with npm run dev and view the running page.

Developing components – place component code under src , documentation under docs , and follow the provided directory structure. Add new components by creating a folder with demo, test, index.vue, index.less, and README.md.

Publishing – build the library ( npm run build ), pack it ( npm pack ), and publish to a private npm registry or the public npm registry using npm login and npm publish .

Using the library in projects – three import methods: automatic on‑demand import via babel-plugin-import , manual on‑demand import, or importing all components (not recommended due to bundle size).

The article concludes that a well‑structured component library improves code reuse, reduces maintenance effort, and can be easily shared across multiple front‑end projects.