unplugin/unplugin-auto-importPublic

NotificationsYou must be signed in to change notification settings
Fork221
Star3.7k

Auto import APIs on-demand for Vite, Webpack and Rollup

License

MIT license

3.7k stars 221 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 482 Commits
.github		.github
examples		examples
playground		playground
src		src
test		test
.gitattributes		.gitattributes
.gitignore		.gitignore
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
eslint.config.js		eslint.config.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.json		tsconfig.json
tsdown.config.ts		tsdown.config.ts
vitest.config.ts		vitest.config.ts

Repository files navigation

unplugin-auto-import

Auto import APIs on-demand for Vite, Webpack, Rspack, Rollup and esbuild. With TypeScript support. Powered byunplugin.

without

import{computed,ref}from'vue'constcount=ref(0)constdoubled=computed(()=>count.value*2)

with

constcount=ref(0)constdoubled=computed(()=>count.value*2)

without

import{useState}from'react'exportfunctionCounter(){const[count,setCount]=useState(0)return<div>{count}</div>}

with

exportfunctionCounter(){const[count,setCount]=useState(0)return<div>{count}</div>}

Install

npm i -D unplugin-auto-import

Vite

// vite.config.tsimportAutoImportfrom'unplugin-auto-import/vite'exportdefaultdefineConfig({plugins:[AutoImport({/* options */}),],})

Example:playground/

Rollup

// rollup.config.jsimportAutoImportfrom'unplugin-auto-import/rollup'exportdefault{plugins:[AutoImport({/* options */}),// other plugins],}

Rolldown

// rolldown.config.jsimportAutoImportfrom'unplugin-auto-import/rolldown'exportdefault{plugins:[AutoImport({/* options */}),// other plugins],}

Webpack

// webpack.config.jsmodule.exports={/* ... */plugins:[require('unplugin-auto-import/webpack')({/* options */}),],}

Rspack

// rspack.config.jsmodule.exports={/* ... */plugins:[require('unplugin-auto-import/rspack')({/* options */}),],}

Nuxt

Youdon't need this plugin for Nuxt, it's already built-in.

Vue CLI

// vue.config.jsmodule.exports={/* ... */plugins:[require('unplugin-auto-import/webpack')({/* options */}),],}

You can also rename the Vue configuration file tovue.config.mjs and use static import syntax (you should use latest@vue/cli-service ^5.0.8):

// vue.config.mjsimportAutoImportfrom'unplugin-auto-import/webpack'exportdefault{configureWebpack:{plugins:[AutoImport({/* options */}),],},}

Quasar

// vite.config.js [Vite]importAutoImportfrom'unplugin-auto-import/vite'import{defineConfig}from'vite'exportdefaultdefineConfig({plugins:[AutoImport({/* options */})]})

// quasar.config.jsexportdefaultdefineConfig(()=>{return{build:{vitePlugins:[['unplugin-auto-import/vite',{/* options */}],]},}})

esbuild

// esbuild.config.jsimport{build}from'esbuild'importAutoImportfrom'unplugin-auto-import/esbuild'build({/* ... */plugins:[AutoImport({/* options */}),],})

Astro

// astro.config.mjsimportAutoImportfrom'unplugin-auto-import/astro'exportdefaultdefineConfig({integrations:[AutoImport({/* options */})],})

Configuration

AutoImport({// targets to transforminclude:[/\.[tj]sx?$/,// .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/,// .vue/\.vue\.[tj]sx?\?vue/,// .vue (vue-loader with experimentalInlineMatchResource enabled)/\.md$/,// .md],// global imports to registerimports:[// presets'vue','vue-router',// custom{'@vueuse/core':[// named imports'useMouse',// import { useMouse } from '@vueuse/core',// alias['useFetch','useMyFetch'],// import { useFetch as useMyFetch } from '@vueuse/core',],'axios':[// default imports['default','axios'],// import { default as axios } from 'axios',],'[package-name]':['[import-names]',// alias['[from]','[alias]'],],},// example type import{from:'vue-router',imports:['RouteLocationRaw'],type:true,},],// Array of strings of regexes that contains imports meant to be filtered out.ignore:['useMouse','useFetch'],// Enable auto import by filename for default module exports under directoriesdefaultExportByFilename:false,// Options for scanning directories for auto importdirsScanOptions:{filePatterns:['*.ts'],// Glob patterns for matching filesfileFilter:file=>file.endsWith('.ts'),// Filter filestypes:true// Enable auto import the types under the directories},// Auto import for module exports under directories// by default it only scan one level of modules under the directorydirs:['./hooks','./composables',// only root modules'./composables/**',// all nested modules// ...{glob:'./hooks',types:true// enable import the types},{glob:'./composables',types:false// If top level dirsScanOptions.types importing enabled, just only disable this directory}// ...],// Filepath to generate corresponding .d.ts file.// Defaults to './auto-imports.d.ts' when `typescript` is installed locally.// Set `false` to disable.dts:'./auto-imports.d.ts',// The mode for generating the .d.ts file.// 'overwrite': overwrite the whole existing .d.ts file with the new type definitions.// 'append': only append the new type definitions to the existing .d.ts file, means the existing type definitions will be kept.// Default to 'append'dtsMode:'append',// Preserve the original file extensions in the generated .d.ts file.// Set to `true` to keep the extensions for .ts and .tsx files.// Default to falsedtsPreserveExts:false,// Array of strings of regexes that contains imports meant to be ignored during// the declaration file generation. You may find this useful when you need to provide// a custom signature for a function.ignoreDts:['ignoredFunction',/^ignore_/],// Auto import inside Vue template// see https://github.com/unjs/unimport/pull/15 and https://github.com/unjs/unimport/pull/72vueTemplate:false,// Auto import directives inside Vue template// see https://github.com/unjs/unimport/pull/374vueDirectives:undefined,// Custom resolvers, compatible with `unplugin-vue-components`// see https://github.com/antfu/unplugin-auto-import/pull/23/resolvers:[/* ... */],// Include auto-imported packages in Vite's `optimizeDeps` options// Recommend to enableviteOptimizeDeps:true,// Inject the imports at the end of other importsinjectAtEnd:true,// Generate corresponding .eslintrc-auto-import.json file.// eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globalseslintrc:{enabled:false,// Default `false`// provide path ending with `.mjs` or `.cjs` to generate the file with the respective formatfilepath:'./.eslintrc-auto-import.json',// Default `./.eslintrc-auto-import.json`globalsPropValue:true,// Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')},// Generate corresponding .biomelintrc-auto-import.json file.// biomejs extends Docs - https://biomejs.dev/guides/how-biome-works/#the-extends-optionbiomelintrc:{enabled:false,// Default `false`filepath:'./.biomelintrc-auto-import.json',// Default `./.biomelintrc-auto-import.json`},// Save unimport items into a JSON file for other tools to consumedumpUnimportItems:'./auto-imports.json',// Default `false`})

Refer to thetype definitions for more options.

Presets

Seesrc/presets.

Package Presets

We only provide presets for the most popular packages, to use any package not included here you can install it as dev dependency and add it to thepackagePresets array option:

AutoImport({/* other options */packagePresets:['detect-browser-es'/* other local package names */]})

You can check theSvelte example for a working example registeringdetect-browser-es package preset and auto importingdetect function inApp.svelte.

Please refer to theunimport PackagePresets jsdocs for more information about options likeignore orcache.

Note: ensure local packages used have package exports configured properly, otherwise the corresponding modules exports will not be detected.

TypeScript

In order to properly hint types for auto-imported APIs:

Enableoptions.dts so thatauto-imports.d.ts file is automatically generated
Make sureauto-imports.d.ts is not excluded intsconfig.json

AutoImport({dts:true// or a custom path})

For better navigation support when working with auto-imported APIs, consider using the@dxup/unimport package.

ESLint

💡 When using TypeScript, we recommend todisableno-undef rule directly as TypeScript already check for them and you don't need to worry about this.

If you have encountered ESLint error ofno-undef:

Enableeslintrc.enabled

AutoImport({eslintrc:{enabled:true,// <-- this},})

Update youreslintrc:Extending Configuration Files

// .eslintrc.jsmodule.exports={extends:['./.eslintrc-auto-import.json',],}

FAQ

Compare to`unimport`

From v0.8.0,unplugin-auto-importusesunimport underneath.unimport is designed to be a lower-level tool (it also powered Nuxt's auto import). You can thinkunplugin-auto-import is a wrapper of it that provides more user-friendly config APIs and capabilities like resolvers. Development of new features will mostly happen inunimport from now.

Compare to`vue-global-api`

You can think of this plugin as a successor tovue-global-api, but offering much more flexibility and bindings with libraries other than Vue (e.g. React).