Auto import APIs on-demand for Vite, Webpack, Rspack, Rollup and esbuild. With TypeScript support. Powered by unplugin.
without
import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)with
const count = ref(0)
const doubled = computed(() => count.value * 2)without
import { useState } from 'react'
export function Counter() {
const [count, setCount] = useState(0)
return <div>{ count }</div>
}with
export function Counter() {
const [count, setCount] = useState(0)
return <div>{ count }</div>
}npm i -D unplugin-auto-importVite
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({ /* options */ }),
],
})Example: playground/
Rollup
// rollup.config.js
import AutoImport from 'unplugin-auto-import/rollup'
export default {
plugins: [
AutoImport({ /* options */ }),
// other plugins
],
}Webpack
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-auto-import/webpack').default({ /* options */ }),
],
}Rspack
// rspack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-auto-import/rspack').default({ /* options */ }),
],
}Nuxt
You don't need this plugin for Nuxt, it's already builtin.
Vue CLI
// vue.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-auto-import/webpack').default({ /* options */ }),
],
}You can also rename the Vue configuration file to vue.config.mjs and use static import syntax (you should use latest @vue/cli-service ^5.0.8):
// vue.config.mjs
import AutoImport from 'unplugin-auto-import/webpack'
export default {
configureWebpack: {
plugins: [
AutoImport({ /* options */ }),
],
},
}Quasar
// vite.config.js [Vite]
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({ /* options */ })
]
})// quasar.conf.js [Webpack]
const AutoImportPlugin = require('unplugin-auto-import/webpack').default
module.exports = {
build: {
chainWebpack(chain) {
chain.plugin('unplugin-auto-import').use(
AutoImportPlugin({ /* options */ }),
)
},
},
}esbuild
// esbuild.config.js
import { build } from 'esbuild'
import AutoImport from 'unplugin-auto-import/esbuild'
build({
/* ... */
plugins: [
AutoImport({
/* options */
}),
],
})Astro
// astro.config.mjs
import AutoImport from 'unplugin-auto-import/astro'
export default defineConfig({
integrations: [
AutoImport({
/* options */
})
],
})AutoImport({
// targets to transform
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
/\.md$/, // .md
],
// global imports to register
imports: [
// 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 directories
defaultExportByFilename: false,
// Auto import for module exports under directories
// by default it only scan one level of modules under the directory
dirs: [
// './hooks',
// './composables' // only root modules
// './composables/**', // all nested modules
// ...
],
// 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',
// 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/72
vueTemplate: false,
// Custom resolvers, compatible with `unplugin-vue-components`
// see https://github.com/antfu/unplugin-auto-import/pull/23/
resolvers: [
/* ... */
],
// Inject the imports at the end of other imports
injectAtEnd: true,
// Generate corresponding .eslintrc-auto-import.json file.
// eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
eslintrc: {
enabled: false, // Default `false`
// provide path ending with `.mjs` or `.cjs` to generate the file with the respective format
filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
},
})Refer to the type definitions for more options.
See src/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 the packagePresets array option:
AutoImport({
/* other options */
packagePresets: ['detect-browser-es'/* other local package names */]
})You can check the Svelte example for a working example registering detect-browser-es package preset and auto importing detect function in App.svelte.
Please refer to the unimport PackagePresets jsdocs for more information about options like ignore or cache.
Note: ensure local packages used have package exports configured properly, otherwise the corresponding modules exports will not be detected.
In order to properly hint types for auto-imported APIs
|
AutoImport({
dts: true // or a custom path
}) |
💡 When using TypeScript, we recommend to disable
no-undefrule directly as TypeScript already check for them and you don't need to worry about this.
If you have encountered ESLint error of no-undef:
|
AutoImport({
eslintrc: {
enabled: true, // <-- this
},
}) |
|
// .eslintrc.js
module.exports = {
extends: [
'./.eslintrc-auto-import.json',
],
} |
Compare to unimport
From v0.8.0, unplugin-auto-import uses unimport underneath. unimport is designed to be a lower-level tool (it also powered Nuxt's auto import). You can think unplugin-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 in unimport from now.
Compare to vue-global-api
You can think of this plugin as a successor to vue-global-api, but offering much more flexibility and bindings with libraries other than Vue (e.g. React).
- Flexible and customizable
- Tree-shakable (on-demand transforming)
- No global population
- Relying on build tools integrations (while
vue-global-apiis pure runtime) - but hey, we have supported quite a few of them already!
MIT License © 2021-PRESENT Anthony Fu
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent