unplugin/unplugin-auto-import

★ 3,784TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((unplugin-auto-import))
    What it does
      Detects function usage
      Inserts import lines
      Skips manual imports
    Build Tools
      Vite
      Webpack
      Rollup
      esbuild
    Framework Presets
      Vue
      React
      Vue Router
    Config Outputs
      TypeScript types
      ESLint config
      Biome config

mindmap root((unplugin-auto-import)) What it does Detects function usage Inserts import lines Skips manual imports Build Tools Vite Webpack Rollup esbuild Framework Presets Vue React Vue Router Config Outputs TypeScript types ESLint config Biome config

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Speed up Vue or React development by skipping manual import statements for built-in functions like ref and computed.

USE CASE 2

Generate TypeScript type definitions so editors autocomplete auto-imported functions without showing errors.

USE CASE 3

Configure ESLint or Biome to ignore missing-import warnings for functions the plugin adds automatically.

USE CASE 4

Add auto-imports for a custom utility library so teammates never need to remember import paths.

Tech stack

TypeScriptViteWebpackRollupRspackesbuildVueReact

Getting it running

Difficulty · easy Time to first run · 5min

Install via npm as a dev dependency and add to the plugins array in your build config, no additional infrastructure needed.

License terms are not described in the explanation.

In plain English

unplugin-auto-import is a build tool plugin that automatically adds import statements to your JavaScript or TypeScript files so you do not have to write them by hand. In modern frontend development, you frequently need to import functions and utilities from libraries at the top of each file before you can use them. This plugin watches which functions you use and inserts the correct import lines automatically during the build process. The README illustrates this with a side-by-side comparison. In a Vue file, you would normally write a line importing the ref and computed functions from the Vue package before using them. With this plugin configured, you can skip that line and just use the functions directly. The plugin detects the usage and adds the import behind the scenes. It works across several popular JavaScript build tools: Vite, Webpack, Rspack, Rollup, Rolldown, and esbuild. There are also integration instructions for frameworks like Astro and Quasar. The plugin includes built-in presets for popular libraries including Vue, React, and Vue Router, so those are ready to use immediately. For other libraries, you configure which functions to auto-import by specifying them in the plugin's options. The plugin also generates a TypeScript type definition file so that editors understand the automatically imported functions without seeing any explicit import statement. It can additionally generate configuration files for ESLint or Biome so those linters do not flag the missing imports as errors. It is installed via npm as a development dependency and configured by adding it to the plugins list in the relevant build tool's config file. The README is thorough with configuration examples for each supported build tool.

Copy-paste prompts

Prompt 1

Set up unplugin-auto-import in my Vite + Vue 3 project so I can use ref, computed, and watch without writing import lines. Show me the full vite.config.ts.

Prompt 2

Add auto-imports for all exports from my src/utils folder using unplugin-auto-import in a TypeScript project.

Prompt 3

Configure unplugin-auto-import with Webpack 5 and React, and generate the ESLint config so linting does not flag missing imports.

Prompt 4

Show me how to add a third-party library not in unplugin-auto-import built-in presets so its functions are auto-imported.

Prompt 5

Explain the tsconfig.json changes needed after setting up unplugin-auto-import so TypeScript knows about the injected imports.

Open on GitHub → Explain another repo

← unplugin on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.