Auto import APIs on-demand for Vite, Webpack and Rollup. With TypeScript support. Powered by unplugin.
<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
</script> to
<script setup>
const count = ref(0)
const doubled = computed(() => count.value * 2)
</script> import { useState } from 'react'
export function Counter() {
const [count, setCount] = useState(0)
return <div>{ count }</div>
}to
export function Counter() {
const [count, setCount] = useState(0)
return <div>{ count }</div>
}...and so on.
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
// nuxt.config.js
export default {
buildModules: [
['unplugin-auto-import/nuxt', { /* options */ }],
],
}This module works for both Nuxt 2 and Nuxt Vite
Vue CLI
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-auto-import/webpack')({ /* options */ }),
],
},
}AutoImport({
// targets to transform
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue\??/, // .vue
],
// global imports to register
imports: [
// presets
'vue',
'vue-router',
// custom
{
'@vueuse/core': [
'useMouse'
],
'[package-name]': [
'[import-names]',
// alias
['[from]', '[alias]']
]
}
],
// custom resolvers
// see https://github.com/antfu/unplugin-auto-import/pull/23/
resolvers: [
/* ... */
]
})Refer to the type definitions for more options.
See src/presets.
Compare to vue-global-api
You can think this plugin as a successor of vue-global-api, which offers much more flexibility and it's no longer bound to Vue exclusively. Now you can use it with any libraries you want (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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent