vite-auto-import-resolvers

3.2.1 verified Mon Apr 27 auth: no javascript

Vite resolver plugin for unplugin-auto-import, enabling automatic API imports from specified directories (e.g., src/composables) without manual import statements. Current stable version is 3.2.1, with monthly releases. Supports prefix/suffix filtering, include/exclude patterns, path normalization, and auto-generation of import presets based on installed dependencies. Requires unplugin-auto-import >=0.6.9 and Vite >=2.9.1. Key differentiator: simplifies auto-import setup for Vue/Vite projects by resolving directory-based modules. Also provides a DirResolverHelper plugin for proper helper injection. TypeScript types included. Note: unplugin-auto-import now has built-in dirs option; this package may become redundant for new projects.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module not supported ↓

cause Package is ESM-only since v3.0.0, but CJS require is used.

fix

Use import syntax instead: import { dirResolver } from 'vite-auto-import-resolvers'. If using require, upgrade Node.js and use dynamic import: const { dirResolver } = await import('vite-auto-import-resolvers').

error TypeError: dirResolver is not a function ↓

cause dirResolver was imported incorrectly (e.g., default import or destructured from wrong path).

fix

Ensure named import: import { dirResolver } from 'vite-auto-import-resolvers'. Also check that the package is installed.

error Uncaught ReferenceError: foo is not defined (when using auto-import) ↓

cause DirResolverHelper plugin is missing or not placed before AutoImports in plugins array.

fix

Add DirResolverHelper() to plugins before AutoImports, e.g., plugins: [Vue(), DirResolverHelper(), AutoImports({...})].

Warnings

breaking v3.0.0 broke compatibility with CJS environments; the package became ESM-only. ↓

fix Ensure your project uses ESM (e.g., type:'module' in package.json or .mjs files).

gotcha DirResolverHelper must be added as a plugin before AutoImports; otherwise dirResolver may not work. ↓

fix Add DirResolverHelper() to the plugins array in vite.config, placed before AutoImports.

deprecated unplugin-auto-import now has a built-in 'dirs' option that may replace vite-auto-import-resolvers. ↓

fix Consider using unplugin-auto-import's built-in 'dirs': { 'src/composables': true } instead.

gotcha The AutoGenerateImports helper only works if the target packages (vue, vue-router, pinia, etc.) are actually installed; otherwise it generates empty imports. ↓

fix Ensure packages are installed or manually specify imports if using optional dependencies.

Install

npm install vite-auto-import-resolvers

yarn add vite-auto-import-resolvers

pnpm add vite-auto-import-resolvers

Imports

dirResolver

wrong

const { dirResolver } = require('vite-auto-import-resolvers')

correct

import { dirResolver } from 'vite-auto-import-resolvers'

ESM-only since v3.0.0; CJS require will fail in most environments.

DirResolverHelper

wrong

import DirResolverHelper from 'vite-auto-import-resolvers'

correct

import { DirResolverHelper } from 'vite-auto-import-resolvers'

Named export, not default. Must be used as a separate Vite plugin.

AutoGenerateImports
```
import { AutoGenerateImports } from 'vite-auto-import-resolvers'
```
Named export; automatically detects installed packages (vue, vue-router, pinia, etc.) for import presets.

Quickstart

Basic setup: adds DirResolverHelper and dirResolver to auto-import modules from src/composables.

// vite.config.ts
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import AutoImports from 'unplugin-auto-import/vite';
import { dirResolver, DirResolverHelper } from 'vite-auto-import-resolvers';

export default defineConfig({
  plugins: [
    Vue(),
    DirResolverHelper(),
    AutoImports({
      imports: ['vue'],
      resolvers: [dirResolver()],
    }),
  ],
});