fangliao-houtai/node_modules/unplugin-auto-import

unplugin-auto-import

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>
}

Install

npm i -D unplugin-auto-import

Vite

```ts // vite.config.ts import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [ AutoImport({ /* options */ }), ], }) ``` Example: [`playground/`](./playground/)

Rollup

```ts // rollup.config.js import AutoImport from 'unplugin-auto-import/rollup' export default { plugins: [ AutoImport({ /* options */ }), // other plugins ], } ```

Webpack

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

Rspack

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

Nuxt

> You **don't need** this plugin for Nuxt, it's already builtin.

Vue CLI

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

Quasar

```ts // quasar.conf.js [Vite] module.exports = { vitePlugins: [ ['unplugin-auto-import/vite', { /* options */ }], ], } ``` ```ts // quasar.conf.js [Webpack] const AutoImportPlugin = require('unplugin-auto-import/webpack') module.exports = { build: { chainWebpack(chain) { chain.plugin('unplugin-auto-import').use( AutoImportPlugin({ /* options */ }), ) }, }, } ```

esbuild

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

Astro

```ts // astro.config.mjs import AutoImport from 'unplugin-auto-import/astro' export default defineConfig({ integrations: [ AutoImport({ /* 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]'],
      ],
    },
    // example type import
    {
      from: 'vue-router',
      imports: ['RouteLocationRaw'],
      type: true,
    },
  ],
  // 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',

  // 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`
    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.

Presets

See src/presets.

TypeScript

In order to properly hint types for auto-imported APIs

1. Enable `options.dts` so that `auto-imports.d.ts` file is automatically generated 2. Make sure `auto-imports.d.ts` is not excluded in `tsconfig.json`

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

ESLint

💡 When using TypeScript, we recommend to disable no-undef rule 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:

1. Enable `eslintrc.enabled`

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

2. Update your `eslintrc`: [Extending Configuration Files](https://eslint.org/docs/user-guide/configuring/configuration-files#extending-configuration-files)

```ts // .eslintrc.js module.exports = { extends: [ './.eslintrc-auto-import.json', ], } ```

FAQ

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

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-PRESENT Anthony Fu