vant/packages/auto-import-resolver/README.md

Vant Auto Import Resolver

@vant/auto-import-resolver For Vant on-demand introduction, parser based on unplugin-vue-components

🇨🇳 查看中文版介绍

---

Features

• Supports Vite, Webpack, Rspack, Vue CLI, Rollup, esbuild and more, powered by unplugin-vue-components

• Support css style VantResolver() default

• Support less style VantResolver({ importStyle: false | 'less' })

  Tip: Vant 4.0 the less file has been removed from the above npm package

• Support ssr VantResolver({ ssr: true })

Install Manually

# via npm
npm i @vant/auto-import-resolver unplugin-vue-components -D

# via yarn
yarn add @vant/auto-import-resolver unplugin-vue-components -D

# via pnpm
pnpm add @vant/auto-import-resolver unplugin-vue-components -D

# via Bun
bun add @vant/auto-import-resolver unplugin-vue-components -D

Vite

// vite.config.ts
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default defineConfig({
  plugins: [
    Components({
      resolvers: [VantResolver()],
    }),
  ],
});

Rollup

// rollup.config.js
import Components from 'unplugin-vue-components/rollup';
import { VantResolver } from '@vant/auto-import-resolver';

export default {
  plugins: [
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

Webpack

// webpack.config.js
import Components from 'unplugin-vue-components/webpack';
import { VantResolver } from '@vant/auto-import-resolver';

module.exports = {
  plugins: [
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

Vue CLI

// vue.config.js
import Components from 'unplugin-vue-components/webpack';
import { VantResolver } from '@vant/auto-import-resolver';

module.exports = {
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

esbuild

// esbuild.config.js
import { build } from 'esbuild';
import Components from 'unplugin-vue-components/esbuild';
import { VantResolver } from '@vant/auto-import-resolver';

build({
  plugins: [
    Components({
      resolvers: [VantResolver()],
    }),
  ],
});