unplugin-auto-import

For Quasar projects using Vite, you can configure the plugin in vite.config.js or via quasar.config.js using the vitePlugins option.

// quasar.config.js
export default defineConfig(() => {
  return {
    build: {
      vitePlugins: [
        ['unplugin-auto-import/vite', { /* options */ }],
      ]
    },
  }
})

To set up the Solid.js example project, install the dependencies using your preferred package manager. While the template includes a pnpm-lock.yaml file, you can use npm or yarn instead.

$ npm install # or pnpm install or yarn install

To use unplugin-auto-import in a Webpack project, require the Webpack-specific entry point and add it to your plugins array in webpack.config.js.

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

To use unplugin-auto-import in an esbuild project, import the esbuild-specific entry point and add it to your plugins array in esbuild.config.js.

// esbuild.config.js
import { build } from 'esbuild'
import AutoImport from 'unplugin-auto-import/esbuild'

build({
  /* ... */
  plugins: [
    AutoImport({
    /* options */
    }),
  ],
})

To use unplugin-auto-import in an Rspack project, require the Rspack-specific entry point and add it to your plugins array in rspack.config.js.

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

If you encounter no-undef errors in ESLint, you can generate a configuration file that includes the auto-imported globals.

1. Enable eslintrc.enabled in the AutoImport configuration.
2. Extend your .eslintrc.js with the generated file.

// In your build config
AutoImport({
  eslintrc: {
    enabled: true,
  },
})

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

The plugin provides presets for popular packages. To use a package preset that is not included by default, install it as a dev dependency and add its name to the packagePresets array in your configuration.

AutoImport({
  /* other options */
  packagePresets: ['detect-browser-es']
})

To use unplugin-auto-import in an Astro project, import the Astro-specific entry point and add it to your integrations array in astro.config.mjs.

// astro.config.mjs
import AutoImport from 'unplugin-auto-import/astro'

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