Automatically Import Vue and Vite APIs with unplugin-auto-import

When taking over an existing Vue 3 project that uses Vite, TypeScript, and Naive UI, developers often face a flood of repetitive import statements for Vue APIs, UI components, and custom utilities, which can be overwhelming.

The unplugin-auto-import plugin provides a solution by automatically importing Vue core functions, composables, and selected third‑party APIs without explicit import statements, making the codebase cleaner and more efficient.

Installation

npm i -D unplugin-auto-import

Basic Vite configuration (vite.config.ts)

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

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

After adding the plugin, the previously required imports such as

// import { ref, reactive, watch, ... } from 'vue'
// import { NConfigProvider, NInput, NDatePicker, NSpace, ... } from 'naive-ui'

can be removed, as the plugin injects them automatically wherever they are used.

The plugin is not limited to Vue and Vite; it also supports other bundlers and frameworks like Webpack, Rspack, Rollup, esbuild, and even React, allowing automatic imports of APIs across many environments.

TypeScript support

When the project uses TypeScript, enable declaration file generation by setting dts: true in the plugin options:

AutoImport({
  dts: true // generates auto-imports.d.ts
})

Make sure the generated auto-imports.d.ts is included in your tsconfig.json include array.

Practical advice

Not every dependency should be auto‑imported; global functions or variables that are rarely used can increase the learning curve for newcomers and reduce code readability. Prefer auto‑importing widely known APIs that most developers recognize.

In summary, unplugin-auto-import helps streamline Vue 3 projects by removing boilerplate imports, supporting multiple build tools, and offering TypeScript type generation, ultimately leading to cleaner and more maintainable frontend code.