Auto import APIs on-demand for Vite, Webpack, 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')({ /* options */ }),
],
}Nuxt
You don't need this plugin for Nuxt, it's already builtin.
Vue CLI
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-auto-import/webpack')({ /* options */ }),
],
},
}Quasar
// quasar.conf.js
const AutoImportPlugin = require('unplugin-auto-import/webpack')
module.exports = {
build: {
chainWebpack(chain) {
chain.plugin('unplugin-auto-import').use(
AutoImportPlugin({ /* options */ }),
)
},
},
}esbuild
// esbuild.config.js
import { build } from 'esbuild'
build({
/* ... */
plugins: [
require('unplugin-auto-import/esbuild')({
/* 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]'],
],
},
],
// Auto import for all module exports under directories
dirs: [
// './hooks',
// './composables'
// ...
],
// 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',
// 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: [
/* ... */
],
// 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`
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.
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 capability like resolvers. Development of new features will mostly happend 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 Anthony Fu