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
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.
Configure options.eslintrc, and modify your eslint configuration file.
Example:
// .eslintrc.js
module.exports = {
/* ... */
extends: [
// ...
'./.eslintrc-auto-import.json',
],
}ESLint Docs: Extending Configuration Files
Note:
.eslintrc-auto-import.jsonis generated automatically, If the configuration file changes do not take effect in time, please check the configuration file, restart eslint server or the editor
In order to properly hint types for auto-imported APIs, make sure:
- to configure
options.dtsso thatauto-imports.d.tsfile is automatically generated - to include
auto-imports.d.tsintsconfig.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