Vant Auto Import Resolver

English | 简体中文

@vant/auto-import-resolver is a resolver for unplugin-vue-components that enables on-demand importing of Vant components.

Features

Supports Vite, Webpack, Rspack, Vue CLI, Rollup, esbuild, and more.
Automatically imports the corresponding CSS styles for the components.
Supports SSR (Server-Side Rendering).

Installation

shell

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

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

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

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

Usage

Vite

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

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

Rollup

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

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

Webpack

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

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

Rspack

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

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

Vue CLI

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

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

esbuild

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

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

Options

importStyle

Whether to automatically import the corresponding styles of the components.

Type: boolean
Default: true
Example:

Components({
  resolvers: [
    VantResolver({
      // Disable style import
      importStyle: false,
    }),
  ],
});

module

Specifies the type of module to be imported.

Type: 'esm' | 'cjs'
Default: 'esm'
Example:

Components({
  resolvers: [
    VantResolver({
      module: 'cjs',
    }),
  ],
});

ssr

Type: boolean
Default: undefined

This option is deprecated. Please use the module option to set the module type.

exclude

Set the components or APIs that do not require automatic import.

Type: string[]
Default: []
Example:

Components({
  resolvers: [
    VantResolver({
      exclude: ['Button'],
    }),
  ],
});

AutoImport({
  resolvers: [
    VantResolver({
      exclude: ['showToast'],
    }),
  ],
});