unplugin-auto-import

21.0.0 verified Sat Apr 25 auth: no javascript

Auto-import APIs on-demand for Vite, Webpack, Rspack, Rollup, Rolldown, esbuild and Astro. Current stable version is 21.0.0 (ESM-only, Node >=20.19.0). Release cadence follows semver with frequent minor/patch releases. Key differentiators: supports multiple bundlers, TypeScript type generation, ESLint config update, and preset system for popular libraries like Vue, React, and VueUse.

Common errors

error Cannot find module 'unplugin-auto-import/vite' or its corresponding type declarations. ↓

cause Node.js <20.19.0 or CommonJS environment without dynamic import.

fix

Upgrade Node to >=20.19.0 and ensure project type is 'module' in package.json, or use dynamic import: const AutoImport = await import('unplugin-auto-import/vite').then(m => m.default);

error Error: [unplugin-auto-import] Failed to resolve preset: 'vue' ↓

cause Missing Vue dependency; auto-import presets require the corresponding library installed.

fix

Install the library: npm install vue (or react, etc.)

error TypeScript error: 'ref' is not defined ↓

cause Type declarations not generated or not included in tsconfig.

fix

Set 'dts: true' in AutoImport options and ensure generated dts file (e.g., 'auto-imports.d.ts') is included in tsconfig.json's 'include' array.

Warnings

breaking v21.0.0 dropped CommonJS support (ESM-only) and requires Node >=20.19.0 ↓

fix Ensure project is ESM (type: module in package.json or .mjs files) and upgrade Node to >=20.19.0.

breaking v20.0.0 requires @nuxt/kit v4; incompatible with @nuxt/kit v3 ↓

fix Update @nuxt/kit to ^4.0.0 if using Nuxt integration.

deprecated Option 'dts' default value changed; v19+ no longer generates dts by default ↓

fix Set dts: true explicitly in options to generate TypeScript declarations.

gotcha Auto-import only works in files matching include patterns; TypeScript may report missing types if dts not generated or imported. ↓

fix Ensure files are in 'include' glob and set 'dts: true' or manually reference generated types via tsconfig.json include.

Install

npm install unplugin-auto-import

yarn add unplugin-auto-import

pnpm add unplugin-auto-import

Imports

default

wrong

const AutoImport = require('unplugin-auto-import/vite')

correct

import AutoImport from 'unplugin-auto-import/vite'

E5-only since v21; use dynamic import in CommonJS or upgrade to ESM.

default

wrong

const AutoImport = require('unplugin-auto-import/webpack')

correct

import AutoImport from 'unplugin-auto-import/webpack'

For Webpack/Rspack config files written in CommonJS, use dynamic import or switch to ESM.

default
wrong
```
import AutoImport from 'unplugin-auto-import'
```
correct
```
import AutoImport from 'unplugin-auto-import/rollup'
```
Must import from subpath for the specific bundler; default export from root is not available.

Quickstart

Shows basic Vite + Vue setup with auto-import plugin, enabling Vue composables without explicit imports.

// vite.config.ts (ESM)
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: true // or './src/types/auto-imports.d.ts'
    })
  ]
})

// Now use ref, computed, etc. without imports:
import { ref, computed } from 'vue' // not needed
const count = ref(0)
const doubled = computed(() => count.value * 2)