{"id":29821305,"url":"https://github.com/antfu/unplugin-auto-import","last_synced_at":"2025-07-29T00:03:43.537Z","repository":{"id":37371691,"uuid":"399356027","full_name":"unplugin/unplugin-auto-import","owner":"unplugin","description":"Auto import APIs on-demand for Vite, Webpack and Rollup","archived":false,"fork":false,"pushed_at":"2025-07-21T08:42:15.000Z","size":2125,"stargazers_count":3589,"open_issues_count":77,"forks_count":210,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-07-23T10:38:38.868Z","etag":null,"topics":["rollup-plugin","unplugin","vite-plugin","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unplugin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"open_collective":"antfu","github":["antfu"]}},"created_at":"2021-08-24T06:15:27.000Z","updated_at":"2025-07-23T05:43:42.000Z","dependencies_parsed_at":"2022-07-14T04:00:33.885Z","dependency_job_id":"63016086-3e88-48ff-9975-f2ee4f7053c0","html_url":"https://github.com/unplugin/unplugin-auto-import","commit_stats":null,"previous_names":["antfu/unplugin-auto-import"],"tags_count":140,"template":false,"template_full_name":null,"purl":"pkg:github/unplugin/unplugin-auto-import","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-auto-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-auto-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-auto-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-auto-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unplugin","download_url":"https://codeload.github.com/unplugin/unplugin-auto-import/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-auto-import/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267605947,"owners_count":24114619,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["rollup-plugin","unplugin","vite-plugin","webpack-plugin"],"created_at":"2025-07-29T00:01:34.624Z","updated_at":"2025-07-29T00:03:43.531Z","avatar_url":"https://github.com/unplugin.png","language":"TypeScript","readme":"# unplugin-auto-import\n\n[![NPM version](https://img.shields.io/npm/v/unplugin-auto-import?color=a1b858\u0026label=)](https://www.npmjs.com/package/unplugin-auto-import)\n\nAuto import APIs on-demand for Vite, Webpack, Rspack, Rollup and esbuild. With TypeScript support. Powered by [unplugin](https://github.com/unjs/unplugin).\n\n---\n\nwithout\n\n```ts\nimport { computed, ref } from 'vue'\n\nconst count = ref(0)\nconst doubled = computed(() =\u003e count.value * 2)\n```\n\nwith\n\n```ts\nconst count = ref(0)\nconst doubled = computed(() =\u003e count.value * 2)\n```\n\n---\n\nwithout\n\n```tsx\nimport { useState } from 'react'\n\nexport function Counter() {\n  const [count, setCount] = useState(0)\n  return \u003cdiv\u003e{ count }\u003c/div\u003e\n}\n```\n\nwith\n\n```tsx\nexport function Counter() {\n  const [count, setCount] = useState(0)\n  return \u003cdiv\u003e{ count }\u003c/div\u003e\n}\n```\n\n## Install\n\n```bash\nnpm i -D unplugin-auto-import\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport AutoImport from 'unplugin-auto-import/vite'\n\nexport default defineConfig({\n  plugins: [\n    AutoImport({ /* options */ }),\n  ],\n})\n```\n\nExample: [`playground/`](./playground/)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRollup\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rollup.config.js\nimport AutoImport from 'unplugin-auto-import/rollup'\n\nexport default {\n  plugins: [\n    AutoImport({ /* options */ }),\n    // other plugins\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    require('unplugin-auto-import/webpack')({ /* options */ }),\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRspack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rspack.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    require('unplugin-auto-import/rspack')({ /* options */ }),\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNuxt\u003c/summary\u003e\u003cbr\u003e\n\n\u003e You **don't need** this plugin for Nuxt, it's already built-in.\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVue CLI\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vue.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    require('unplugin-auto-import/webpack')({ /* options */ }),\n  ],\n}\n```\n\nYou 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`):\n```ts\n// vue.config.mjs\nimport AutoImport from 'unplugin-auto-import/webpack'\n\nexport default {\n  configureWebpack: {\n    plugins: [\n      AutoImport({ /* options */ }),\n    ],\n  },\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eQuasar\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.js [Vite]\nimport AutoImport from 'unplugin-auto-import/vite'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [\n    AutoImport({ /* options */ })\n  ]\n})\n```\n\n```ts\n// quasar.config.js\nexport default defineConfig(() =\u003e {\n  return {\n    build: {\n      vitePlugins: [\n        ['unplugin-auto-import/vite', { /* options */ }],\n      ]\n    },\n  }\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eesbuild\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// esbuild.config.js\nimport { build } from 'esbuild'\nimport AutoImport from 'unplugin-auto-import/esbuild'\n\nbuild({\n  /* ... */\n  plugins: [\n    AutoImport({\n      /* options */\n    }),\n  ],\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAstro\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// astro.config.mjs\nimport AutoImport from 'unplugin-auto-import/astro'\n\nexport default defineConfig({\n  integrations: [\n    AutoImport({\n      /* options */\n    })\n  ],\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n## Configuration\n\n```ts\nAutoImport({\n  // targets to transform\n  include: [\n    /\\.[tj]sx?$/, // .ts, .tsx, .js, .jsx\n    /\\.vue$/,\n    /\\.vue\\?vue/, // .vue\n    /\\.vue\\.[tj]sx?\\?vue/, // .vue (vue-loader with experimentalInlineMatchResource enabled)\n    /\\.md$/, // .md\n  ],\n\n  // global imports to register\n  imports: [\n    // presets\n    'vue',\n    'vue-router',\n    // custom\n    {\n      '@vueuse/core': [\n        // named imports\n        'useMouse', // import { useMouse } from '@vueuse/core',\n        // alias\n        ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',\n      ],\n      'axios': [\n        // default imports\n        ['default', 'axios'], // import { default as axios } from 'axios',\n      ],\n      '[package-name]': [\n        '[import-names]',\n        // alias\n        ['[from]', '[alias]'],\n      ],\n    },\n    // example type import\n    {\n      from: 'vue-router',\n      imports: ['RouteLocationRaw'],\n      type: true,\n    },\n  ],\n\n  // Array of strings of regexes that contains imports meant to be filtered out.\n  ignore: [\n    'useMouse',\n    'useFetch'\n  ],\n\n  // Enable auto import by filename for default module exports under directories\n  defaultExportByFilename: false,\n\n  // Options for scanning directories for auto import\n  dirsScanOptions: {\n    filePatterns: ['*.ts'], // Glob patterns for matching files\n    fileFilter: file =\u003e file.endsWith('.ts'), // Filter files\n    types: true // Enable auto import the types under the directories\n  },\n\n  // Auto import for module exports under directories\n  // by default it only scan one level of modules under the directory\n  dirs: [\n    './hooks',\n    './composables', // only root modules\n    './composables/**', // all nested modules\n    // ...\n\n    {\n      glob: './hooks',\n      types: true // enable import the types\n    },\n    {\n      glob: './composables',\n      types: false // If top level dirsScanOptions.types importing enabled, just only disable this directory\n    }\n    // ...\n  ],\n\n  // Filepath to generate corresponding .d.ts file.\n  // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.\n  // Set `false` to disable.\n  dts: './auto-imports.d.ts',\n\n  // Array of strings of regexes that contains imports meant to be ignored during\n  // the declaration file generation. You may find this useful when you need to provide\n  // a custom signature for a function.\n  ignoreDts: [\n    'ignoredFunction',\n    /^ignore_/\n  ],\n\n  // Auto import inside Vue template\n  // see https://github.com/unjs/unimport/pull/15 and https://github.com/unjs/unimport/pull/72\n  vueTemplate: false,\n\n  // Auto import directives inside Vue template\n  // see https://github.com/unjs/unimport/pull/374\n  vueDirectives: undefined,\n\n  // Custom resolvers, compatible with `unplugin-vue-components`\n  // see https://github.com/antfu/unplugin-auto-import/pull/23/\n  resolvers: [\n    /* ... */\n  ],\n\n  // Include auto-imported packages in Vite's `optimizeDeps` options\n  // Recommend to enable\n  viteOptimizeDeps: true,\n\n  // Inject the imports at the end of other imports\n  injectAtEnd: true,\n\n  // Generate corresponding .eslintrc-auto-import.json file.\n  // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals\n  eslintrc: {\n    enabled: false, // Default `false`\n    // provide path ending with `.mjs` or `.cjs` to generate the file with the respective format\n    filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`\n    globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')\n  },\n\n  // Generate corresponding .biomelintrc-auto-import.json file.\n  // biomejs extends Docs - https://biomejs.dev/guides/how-biome-works/#the-extends-option\n  biomelintrc: {\n    enabled: false, // Default `false`\n    filepath: './.biomelintrc-auto-import.json', // Default `./.biomelintrc-auto-import.json`\n  },\n\n  // Save unimport items into a JSON file for other tools to consume\n  dumpUnimportItems: './auto-imports.json', // Default `false`\n})\n```\n\nRefer to the [type definitions](./src/types.ts) for more options.\n\n## Presets\n\nSee [src/presets](./src/presets).\n\n## Package Presets\n\nWe 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:\n```ts\nAutoImport({\n  /* other options */\n  packagePresets: ['detect-browser-es'/* other local package names */]\n})\n```\n\nYou can check the [Svelte example](./examples/vite-svelte) for a working example registering `detect-browser-es` package preset and auto importing `detect` function in [App.svelte](./examples/vite-svelte/src/App.svelte).\n\nPlease refer to the [unimport PackagePresets jsdocs](https://github.com/unjs/unimport/blob/main/src/types.ts) for more information about options like `ignore` or `cache`.\n\n**Note**: ensure local packages used have package exports configured properly, otherwise the corresponding modules exports will not be detected.\n\n## TypeScript\n\nIn order to properly hint types for auto-imported APIs\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd width=\"400px\" valign=\"top\"\u003e\n\n1. Enable `options.dts` so that `auto-imports.d.ts` file is automatically generated\n2. Make sure `auto-imports.d.ts` is not excluded in `tsconfig.json`\n\n\u003c/td\u003e\n\u003ctd width=\"600px\"\u003e\u003cbr\u003e\n\n```ts\nAutoImport({\n  dts: true // or a custom path\n})\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## ESLint\n\n\u003e 💡 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.\n\nIf you have encountered ESLint error of `no-undef`:\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd width=\"400px\"\u003e\n\n1. Enable `eslintrc.enabled`\n\n\u003c/td\u003e\n\u003ctd width=\"600px\"\u003e\u003cbr\u003e\n\n```ts\nAutoImport({\n  eslintrc: {\n    enabled: true, // \u003c-- this\n  },\n})\n```\n\n\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd width=\"400px\"\u003e\n\n2. Update your `eslintrc`:\n[Extending Configuration Files](https://eslint.org/docs/user-guide/configuring/configuration-files#extending-configuration-files)\n\n\u003c/td\u003e\n\u003ctd width=\"600px\"\u003e\u003cbr\u003e\n\n```ts\n// .eslintrc.js\nmodule.exports = {\n  extends: [\n    './.eslintrc-auto-import.json',\n  ],\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## FAQ\n\n### Compare to [`unimport`](https://github.com/unjs/unimport)\n\nFrom 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.\n\n### Compare to [`vue-global-api`](https://github.com/antfu/vue-global-api)\n\nYou 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).\n\n###### Pros\n\n- Flexible and customizable\n- Tree-shakable (on-demand transforming)\n- No global population\n\n###### Cons\n\n- Relying on build tools integrations (while `vue-global-api` is pure runtime) - but hey, we have supported quite a few of them already!\n\n## Sponsors\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg\"\u003e\n    \u003cimg src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\n[MIT](./LICENSE) License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)\n","funding_links":["https://opencollective.com/antfu","https://github.com/sponsors/antfu"],"categories":["Plugins","Pre-packed","插件和工具","Bundle Tool"],"sub_categories":["Framework-agnostic Plugins","JsPlugins","Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantfu%2Funplugin-auto-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantfu%2Funplugin-auto-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantfu%2Funplugin-auto-import/lists"}