Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
unplugin-auto-import
Advanced tools
unplugin-auto-import is a powerful tool for automatically importing functions, components, and other modules in your JavaScript or TypeScript projects. It helps to reduce boilerplate code and improve development efficiency by eliminating the need to manually import frequently used modules.
Automatic Import of Functions
Automatically imports functions from specified libraries (e.g., Vue and Vue Router) without needing to manually import them in each file.
module.exports = {
plugins: [
require('unplugin-auto-import/webpack')({
imports: ['vue', 'vue-router'],
}),
],
};
Custom Imports
Allows you to specify custom imports from libraries like Lodash, so you can use functions like debounce and throttle without manual imports.
module.exports = {
plugins: [
require('unplugin-auto-import/webpack')({
imports: [
{
'lodash': [
'debounce',
'throttle'
]
}
],
}),
],
};
TypeScript Support
Generates TypeScript declaration files for the auto-imported modules, ensuring type safety and better development experience.
module.exports = {
plugins: [
require('unplugin-auto-import/webpack')({
dts: true,
}),
],
};
ESLint Integration
Integrates with ESLint to ensure that auto-imported modules are recognized and do not trigger linting errors.
module.exports = {
plugins: [
require('unplugin-auto-import/webpack')({
eslintrc: {
enabled: true,
},
}),
],
};
babel-plugin-auto-import is a Babel plugin that automatically imports specified modules when they are used in your code. It is similar to unplugin-auto-import but is specifically designed to work with Babel, making it a good choice for projects that already use Babel for transpilation.
eslint-plugin-import is an ESLint plugin that helps manage and validate import statements in your code. While it does not automatically import modules, it provides rules to ensure that imports are correctly used and can help prevent common issues related to imports.
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-import
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({ /* options */ }),
],
})
Example: playground/
// 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 */ }),
],
}
You don't need this plugin for Nuxt, it's already builtin.
// 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 */
}),
],
})
// astro.config.mjs
import AutoImport from 'unplugin-auto-import/astro'
export default defineConfig({
integrations: [
AutoImport({
/* 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 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: [
/* ... */
],
// 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.
In order to properly hint types for auto-imported APIs
|
|
💡 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
:
|
|
|
|
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.
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).
vue-global-api
is pure runtime) - but hey, we have supported quite a few of them already!MIT License © 2021 Anthony Fu
FAQs
Register global imports on demand for Vite and Webpack
The npm package unplugin-auto-import receives a total of 205,765 weekly downloads. As such, unplugin-auto-import popularity was classified as popular.
We found that unplugin-auto-import demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.