unplugin-vue-components

Use built-in resolvers to automatically import components from popular UI libraries like Ant Design Vue, Element Plus, or Vant. Import the specific resolver from unplugin-vue-components/resolvers and pass it to the resolvers option.

import {
  AntDesignVueResolver,
  ElementPlusResolver,
  VantResolver,
} from 'unplugin-vue-components/resolvers'
// vite.config.js
import Components from 'unplugin-vue-components/vite'

// your plugin installation
Components({
  resolvers: [
    AntDesignVueResolver(),
    ElementPlusResolver(),
    VantResolver(),
  ],
})

Install the package as a development dependency using npm:

npm i unplugin-vue-components -D

To use the plugin in a Vite project, import Components from unplugin-vue-components/vite and add it to your plugins array in vite.config.ts.

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})

To use the plugin in a Webpack project, import Components from unplugin-vue-components/webpack. Note that support for CommonJS was removed after version 29.1.0.

// webpack.config.js
// unplugin-vue-components removed support for CommonJS after version 29.1.0
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-components/webpack')({ /* options */ }),
  ],
}

To avoid maintenance overhead in the core repository, unplugin-vue-components encourages UI libraries to publish their own resolvers as separate packages. If you are using a UI library that provides its own resolver, import it directly and add it to the resolvers array in your configuration.

Instead of requesting new resolvers be added to the unplugin-vue-components repository, you should use the resolver provided by the library itself.

import MyLibResolver from 'my-lib/auto-import-resolver' // <--

import Components from 'unplugin-vue-components'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [
        MyLibResolver
      ]
    })
  ]
})

For Quasar projects using Vite, you can configure the plugin within the build.vitePlugins section of quasar.config.js.

// quasar.config.js
export default defineConfig(() => {
  return {
    build: {
      vitePlugins: [
        ['unplugin-vue-components/vite', { /* options */ }],
      ]
    },
  }
})

To use the plugin in an Rspack project, import Components from unplugin-vue-components/rspack. Note that support for CommonJS was removed after version 29.1.0.

// rspack.config.js
// unplugin-vue-components removed support for CommonJS after version 29.1.0
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-components/rspack')({ /* options */ }),
  ],
}

To enable TypeScript support for auto-imported components, set dts: true in the plugin configuration. This will generate a components.d.ts file. Ensure you add components.d.ts to the include array in your tsconfig.json.

Components({
  dts: true, // enabled by default if `typescript` is installed
})

To use the plugin in an esbuild project, import Components from unplugin-vue-components/esbuild and add it to the plugins array in your esbuild configuration.

// esbuild.config.js
import { build } from 'esbuild'
import Components from 'unplugin-vue-components/esbuild'

build({
  /* ... */
  plugins: [
    Components({
      /* options */
    }),
  ],
})

To use the plugin in a Rolldown project, import Components from unplugin-vue-components/rolldown and add it to your plugins array in rolldown.config.js.

// rolldown.config.js
import Components from 'unplugin-vue-components/rolldown'

export default {
  plugins: [
    Components({ /* options */ }),
  ],
}

To use the plugin in a Rollup project, import Components from unplugin-vue-components/rollup and add it to your plugins array in rollup.config.js.

// rollup.config.js
import Components from 'unplugin-vue-components/rollup'

export default {
  plugins: [
    Components({ /* options */ }),
  ],
}