unplugin-auto-import

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

without

import { ref, computed } 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>
}

Install

npm i -D unplugin-auto-import

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

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

// rollup.config.js
import AutoImport from 'unplugin-auto-import/rollup'

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

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

// nuxt.config.js
export default {
  buildModules: [
    ['unplugin-auto-import/nuxt', { /* options */ }],
  ],
}

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

// quasar.conf.js
const AutoImportPlugin = require('unplugin-auto-import/webpack')

module.exports = {
  build: {
    chainWebpack (chain) {
      chain.plugin('unplugin-auto-import').use(
        AutoImportPlugin({ /* options */ })
      )
    }
  }
}

// esbuild.config.js
import { build } from 'esbuild'

build({
  /* ... */
  plugins: [
    require('unplugin-auto-import/esbuild')({
      /* options */
    }),
  ],
})

Configuration

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]']
      ]
    }
  ],

  // 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')
  },

  // custom resolvers
  // see https://github.com/antfu/unplugin-auto-import/pull/23/
  resolvers: [
    /* ... */
  ]
})

Refer to the type definitions for more options.

Presets

See src/presets.

ESLint - eslint(no-undef)

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.json is generated automatically, If the configuration file changes do not take effect in time, please check the configuration file, restart eslint server or the editor

FAQ

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).

Pros

• Flexible and customizable
• Tree-shakable (on-demand transforming)
• No global population

Cons

• Relying on build tools integrations (while vue-global-api is pure runtime) - but hey, we have supported quite a few of them already!

Sponsors

License

MIT License © 2021 Anthony Fu