### Configure Auto-Import for Solid.js with Vite

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

This configuration example demonstrates setting up unplugin-auto-import for a Solid.js project with Vite. It integrates with unplugin-icons for automatic icon imports and includes imports for Solid.js core APIs and routing. The setup also generates TypeScript declaration files.

```typescript
// vite.config.ts
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import { defineConfig } from 'vite'
import solidPlugin from 'vite-plugin-solid'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    solidPlugin(),
    Icons({ compiler: 'solid' }),
    AutoImport({
      imports: ['solid-js', '@solidjs/router'],
      dts: './src/auto-imports.d.ts',
      resolvers: [
        IconsResolver({ prefix: 'Icon' }),
      ],
    }),
  ],
  build: { target: 'esnext' },
})
```

--------------------------------

### Install unplugin-auto-import

Source: https://github.com/unplugin/unplugin-auto-import/blob/main/README.md

Command to install the package as a development dependency using npm.

```bash
npm i -D unplugin-auto-import
```

--------------------------------

### Configure unplugin-auto-import for Build Tools

Source: https://github.com/unplugin/unplugin-auto-import/blob/main/README.md

Examples showing how to integrate the plugin into various build tool configurations including Vite, Rollup, Webpack, Rspack, and esbuild.

```typescript
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

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

```typescript
// rollup.config.js
import AutoImport from 'unplugin-auto-import/rollup'

export default {
  plugins: [
    AutoImport({ /* options */ }),
  ],
}
```

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

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

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

--------------------------------

### Configure unplugin-auto-import for Bundlers

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Examples of how to integrate the plugin into various build tool configurations including Vite, Webpack, Rollup, Rspack, esbuild, and Astro.

```typescript
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', '@vueuse/core'],
      dts: './auto-imports.d.ts',
      dirs: [
        './composables',
        './composables/**',
      ],
      vueTemplate: true,
    }),
  ],
})
```

```javascript
// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')

module.exports = {
  plugins: [
    AutoImport({
      imports: ['react', 'react-router-dom'],
      dts: './src/auto-imports.d.ts',
    }),
  ],
}
```

```javascript
// rollup.config.js
import AutoImport from 'unplugin-auto-import/rollup'

export default {
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: true,
    }),
  ],
}
```

```javascript
// rspack.config.js
module.exports = {
  plugins: [
    require('unplugin-auto-import/rspack')({
      imports: ['react', 'ahooks'],
      dts: './src/auto-imports.d.ts',
    }),
  ],
}
```

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

build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/index.js',
  plugins: [
    AutoImport({
      imports: ['vue'],
      dts: true,
    }),
  ],
})
```

```javascript
// astro.config.mjs
import react from '@astrojs/react'
import svelte from '@astrojs/svelte'
import vue from '@astrojs/vue'
import { defineConfig } from 'astro/config'
import AutoImport from 'unplugin-auto-import/astro'

export default defineConfig({
  integrations: [
    vue(),
    svelte(),
    react(),
    AutoImport({
      imports: [
        'vue',
        'svelte',
        'svelte/store',
        'react',
      ],
      dirs: ['src/utils/*.ts'],
      dts: './src/auto-imports.d.ts',
    }),
  ],
})
```

--------------------------------

### Vue API Auto-import Example

Source: https://github.com/unplugin/unplugin-auto-import/blob/main/README.md

Demonstrates how the plugin removes the need for explicit import statements for Vue composition APIs.

```typescript
// Without auto-import
import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

// With auto-import
const count = ref(0)
const doubled = computed(() => count.value * 2)
```

--------------------------------

### React Component Auto-import Example

Source: https://github.com/unplugin/unplugin-auto-import/blob/main/README.md

Demonstrates how the plugin removes the need for explicit import statements for React hooks.

```tsx
// Without auto-import
import { useState } from 'react'
export function Counter() {
  const [count, setCount] = useState(0)
  return <div>{ count }</div>
}

// With auto-import
export function Counter() {
  const [count, setCount] = useState(0)
  return <div>{ count }</div>
}
```

--------------------------------

### Enable Vite Dependency Optimization

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Automatically adds auto-imported packages to Vite's optimizeDeps configuration. This improves cold start performance by pre-bundling the dependencies.

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', '@vueuse/core'],
      viteOptimizeDeps: true,
    }),
  ],
}
```

--------------------------------

### Implement Custom Resolvers

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Uses resolvers to dynamically resolve imports at build time. This example demonstrates integrating third-party libraries like Element Plus and custom composable resolution.

```typescript
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    Icons({ compiler: 'vue3' }),
    AutoImport({
      imports: ['vue'],
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: 'Icon',
          enabledCollections: ['mdi', 'heroicons']
        }),
        (name) => {
          if (name.startsWith('use')) {
            return { from: '@/composables', name }
          }
        }
      ]
    })
  ]
}
```

--------------------------------

### Use Built-in Presets

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Demonstration of configuring the plugin with multiple framework presets for automated API resolution.

```typescript
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        'vuex',
        '@vueuse/core',
        '@vueuse/head',
        '@vueuse/math',
        'react',
        'react-dom',
        'react-router',
        'react-router-dom',
        'react-i18next',
        'ahooks',
        'jotai',
        'jotai/utils',
        'recoil',
        'mobx',
        'mobx-react-lite',
        'svelte',
        'svelte/store',
        'svelte/motion',
        'svelte/transition',
        'svelte/animate',
        'svelte/easing',
        'solid-js',
        '@solidjs/router',
        'preact',
        'quasar',
        'vitepress',
        'vee-validate',
        'uni-app',
      ],
    }),
  ],
}
```

--------------------------------

### Configure Package Presets

Source: https://github.com/unplugin/unplugin-auto-import/blob/main/README.md

Demonstrates how to add custom package presets to the auto-import configuration. This allows the plugin to detect and auto-import functions from local dependencies.

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

--------------------------------

### Configure React Project Auto-Imports

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

A comprehensive configuration for React projects, including hooks, routing, internationalization, and icon resolution. It also enables ESLint configuration generation.

```typescript
import React from '@vitejs/plugin-react'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    React(),
    Icons({ compiler: 'jsx', jsx: 'react' }),
    AutoImport({
      imports: [
        'react',
        'react-router-dom',
        'react-i18next',
        'ahooks',
      ],
      dts: './src/auto-imports.d.ts',
      dirs: ['src/hooks', 'src/layouts', 'src/components'],
      eslintrc: { enabled: true },
      defaultExportByFilename: true,
      resolvers: [
        IconsResolver({ componentPrefix: 'Icon' }),
      ],
    }),
  ],
})
```

--------------------------------

### Presets

Source: https://github.com/unplugin/unplugin-auto-import/blob/main/README.md

Information about available presets for unplugin-auto-import, which provide pre-configured import sets for common libraries and frameworks.

```APIDOC
## Presets

Unplugin-auto-import comes with a set of pre-defined presets that can be easily included in your configuration. These presets simplify the setup process by providing common import mappings for popular libraries and frameworks.

Refer to the `src/presets` directory for a list of available presets and their configurations.
```

--------------------------------

### Configure unplugin-auto-import options

Source: https://github.com/unplugin/unplugin-auto-import/blob/main/README.md

This snippet demonstrates the full configuration object for the AutoImport plugin. It includes settings for file inclusion, custom import presets, directory scanning, and generation of declaration files for TypeScript and linting tools.

```typescript
AutoImport({
  include: [
    /\.[tj]sx?$/,
    /\.vue$/,
    /\.vue\?vue/,
    /\.vue\.[tj]sx?\?vue/,
    /\.md$/,
  ],
  imports: [
    'vue',
    'vue-router',
    {
      '@vueuse/core': [
        'useMouse',
        ['useFetch', 'useMyFetch'],
      ],
      'axios': [
        ['default', 'axios'],
      ],
    },
    {
      from: 'vue-router',
      imports: ['RouteLocationRaw'],
      type: true,
    },
  ],
  dirs: [
    './hooks',
    './composables/**',
    {
      glob: './hooks',
      types: true
    }
  ],
  dts: './auto-imports.d.ts',
  eslintrc: {
    enabled: false,
    filepath: './.eslintrc-auto-import.json',
    globalsPropValue: true,
  }
})
```

--------------------------------

### Integrate with ESLint

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Sets up ESLint configuration to recognize auto-imported globals, preventing 'no-undef' errors. It generates a JSON file that can be extended in the main ESLint configuration.

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router'],
      eslintrc: {
        enabled: true,
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true
      }
    })
  ]
}
```

--------------------------------

### Define Include and Exclude File Patterns

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Configures which files the plugin processes for auto-imports. It uses regex patterns to include specific file types like .vue, .ts, or .md and exclude directories like node_modules.

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['vue'],
      include: [
        /\.[tj]sx?$/,
        /\.vue$/,
        /\.vue\?vue/,
        /\.vue\.[tj]sx?\?vue/,
        /\.md$/,
        /\.astro$/,
        /\.svelte$/,
      ],
      exclude: [
        /[\\/]node_modules[\\/]/,
        /[\\/]\.git[\\/]/,
      ],
    }),
  ],
}
```

--------------------------------

### Configure Directory Scanning with Type Control

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Provides granular control over type scanning when importing from local directories. Allows enabling or disabling type imports on a per-directory basis.

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['vue'],
      dirsScanOptions: { types: true },
      dirs: [
        './src/composables/**',
        { glob: './src/hooks', types: true },
        { glob: './src/utils', types: false },
      ],
    }),
  ],
}
```

--------------------------------

### Configure ESLint for Auto-Imports

Source: https://github.com/unplugin/unplugin-auto-import/blob/main/README.md

Enables ESLint support to prevent 'no-undef' errors. This involves enabling the plugin's internal ESLint config generation and extending the project's ESLint configuration.

```typescript
AutoImport({
  eslintrc: {
    enabled: true,
  },
})
```

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

--------------------------------

### Configure Package Presets

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Registers external npm packages as auto-import sources. Supports ignoring specific exports and generating TypeScript declaration files for better IDE support.

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['svelte', 'svelte/store'],
      packagePresets: [
        'detect-browser-es',
        'date-fns',
        { package: 'my-custom-lib', ignore: ['internalHelper'] },
      ],
      dts: './src/auto-imports.d.ts',
    }),
  ],
}
```

--------------------------------

### Generate TypeScript Declaration Files

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Configures unplugin-auto-import to generate .d.ts files for IDE type support. It allows specifying the output path, update mode, and exclusion patterns for specific imports.

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', '@vueuse/core'],
      dts: './src/auto-imports.d.ts',
      dtsMode: 'append',
      dtsPreserveExts: false,
      ignoreDts: [
        'ignoredFunction',
        /^internal_/
      ]
    })
  ]
}
```

--------------------------------

### Enable TypeScript Declaration Generation

Source: https://github.com/unplugin/unplugin-auto-import/blob/main/README.md

Configures the plugin to generate a d.ts file for auto-imported APIs. This ensures that TypeScript can provide proper type hints for imported functions.

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

--------------------------------

### AutoImport Configuration

Source: https://github.com/unplugin/unplugin-auto-import/blob/main/README.md

Configuration options for the AutoImport plugin, including include patterns, custom imports, ignored imports, directory scanning, and type declaration file generation.

```APIDOC
## AutoImport Configuration

This section details the configuration options for the `AutoImport` plugin. These options allow you to customize how and what modules are automatically imported into your project.

### Options

- **include** (Array<string | RegExp>) - Targets to transform. Specifies the file patterns for which auto-import should be applied.
- **imports** (Array<string | object>) - Global imports to register. Can be preset names (e.g., 'vue') or custom import configurations.
  - Custom import configuration example:
    ```json
    {
      '@vueuse/core': [
        'useMouse', // named imports
        ['useFetch', 'useMyFetch'] // alias
      ],
      'axios': [
        ['default', 'axios'] // default imports
      ]
    }
    ```
- **ignore** (Array<string>) - Imports meant to be filtered out.
- **defaultExportByFilename** (boolean) - Enable auto import by filename for default module exports under directories.
- **dirsScanOptions** (object) - Options for scanning directories for auto import.
  - **filePatterns** (Array<string>) - Glob patterns for matching files.
  - **fileFilter** (function) - Filter files based on a custom function.
  - **types** (boolean) - Enable auto import of types under the directories.
- **dirs** (Array<string | object>) - Auto import for module exports under directories. Can specify glob patterns and type import options.
- **dts** (string | boolean) - Filepath to generate the corresponding `.d.ts` file. Set to `false` to disable.
- **dtsMode** (string) - The mode for generating the `.d.ts` file ('overwrite' or 'append'). Defaults to 'append'.
- **dtsPreserveExts** (boolean) - Preserve the original file extensions in the generated `.d.ts` file. Defaults to `false`.
- **ignoreDts** (Array<string | RegExp>) - Imports to be ignored during declaration file generation.
- **vueTemplate** (boolean) - Enable auto import inside Vue templates.
- **vueDirectives** (boolean | undefined) - Enable auto import directives inside Vue templates.
- **resolvers** (Array<object>) - Custom resolvers, compatible with `unplugin-vue-components`.
- **viteOptimizeDeps** (boolean) - Include auto-imported packages in Vite's `optimizeDeps` options. Recommended to enable.
- **injectAtEnd** (boolean) - Inject the imports at the end of other imports.
- **eslintrc** (object) - Configuration for generating `.eslintrc-auto-import.json`.
  - **enabled** (boolean) - Enable generation. Defaults to `false`.
  - **filepath** (string) - Path to the generated file. Defaults to `./.eslintrc-auto-import.json`.
  - **globalsPropValue** (boolean | string) - Value for the `globals` property in ESLint config. Defaults to `true`.
- **biomelintrc** (object) - Configuration for generating `.biomelintrc-auto-import.json`.
  - **enabled** (boolean) - Enable generation. Defaults to `false`.
  - **filepath** (string) - Path to the generated file. Defaults to `./.biomelintrc-auto-import.json`.
- **dumpUnimportItems** (string | boolean) - Save unimport items into a JSON file for other tools to consume. Defaults to `false`.

### Example Usage

```ts
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      // targets to transform
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.vue\.[tj]sx?\?vue/, // .vue (vue-loader with experimentalInlineMatchResource enabled)
        /\.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',
          ],
        },
        // example type import
        {
          from: 'vue-router',
          imports: ['RouteLocationRaw'],
          type: true,
        },
      ],

      // Array of strings of regexes that contains imports meant to be filtered out.
      ignore: [
        'useMouse',
        'useFetch'
      ],

      // Enable auto import by filename for default module exports under directories
      defaultExportByFilename: false,

      // Options for scanning directories for auto import
      dirsScanOptions: {
        filePatterns: ['*.ts'], // Glob patterns for matching files
        fileFilter: file => file.endsWith('.ts'), // Filter files
        types: true // Enable auto import the types under the directories
      },

      // 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',

      // The mode for generating the .d.ts file.
      // 'overwrite': overwrite the whole existing .d.ts file with the new type definitions.
      // 'append': only append the new type definitions to the existing .d.ts file, means the existing type definitions will be kept.
      // Default to 'append'
      dtsMode: 'append',

      // Preserve the original file extensions in the generated .d.ts file.
      // Set to `true` to keep the extensions for .ts and .tsx files.
      // Default to false
      dtsPreserveExts: false,

      // Array of strings of regexes that contains imports meant to be ignored during
      // the declaration file generation. You may find this useful when you need to provide
      // a custom signature for a function.
      ignoreDts: [
        'ignoredFunction',
        /^ignore_/
      ],

      // Auto import inside Vue template
      // see https://github.com/unjs/unimport/pull/15 and https://github.com/unjs/unimport/pull/72
      vueTemplate: false,

      // Auto import directives inside Vue template
      // see https://github.com/unjs/unimport/pull/374
      vueDirectives: undefined,

      // Custom resolvers, compatible with `unplugin-vue-components`
      // see https://github.com/antfu/unplugin-auto-import/pull/23/
      resolvers: [
        /* ... */
      ],

      // Include auto-imported packages in Vite's `optimizeDeps` options
      // Recommend to enable
      viteOptimizeDeps: true,

      // 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`
        // provide path ending with `.mjs` or `.cjs` to generate the file with the respective format
        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
      },

      // Generate corresponding .biomelintrc-auto-import.json file.
      // biomejs extends Docs - https://biomejs.dev/guides/how-biome-works/#the-extends-option
      biomelintrc: {
        enabled: false, // Default `false`
        filepath: './.biomelintrc-auto-import.json', // Default `./.biomelintrc-auto-import.json`
      },

      // Save unimport items into a JSON file for other tools to consume
      dumpUnimportItems: './auto-imports.json', // Default `false`
    })
  ]
}
```
```

--------------------------------

### Configure Auto-Import for Svelte with Vite

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

This snippet shows how to configure unplugin-auto-import for a Svelte project using Vite. It enables automatic imports for Svelte core modules, stores, transitions, motion, and easing, along with package presets. The configuration also sets up TypeScript declaration files.

```typescript
// vite.config.ts
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    svelte(),
    AutoImport({
      imports: [
        'svelte',
        'svelte/store',
        'svelte/transition',
        'svelte/motion',
        'svelte/easing',
      ],
      packagePresets: ['detect-browser-es'],
      dts: './src/auto-imports.d.ts',
    }),
  ],
})
```

--------------------------------

### Configure Directory Scanning

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Automatically scans specified directories for exports to auto-import. Supports glob patterns, custom file extensions, and naming conventions based on filenames.

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['vue'],
      dirs: ['./src/composables', './src/composables/**', './src/hooks', './src/stores', './src/utils'],
      dirsScanOptions: { filePatterns: ['*.ts', '*.tsx'], types: true },
      defaultExportByFilename: true,
    }),
  ],
}
```

--------------------------------

### Integrate with Biome

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Configures Biome to recognize auto-imported globals. This ensures the linter correctly identifies imports without triggering undefined variable warnings.

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router'],
      biomelintrc: {
        enabled: true,
        filepath: './.biomelintrc-auto-import.json'
      }
    })
  ]
}
```

--------------------------------

### Configure Custom Imports Map

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Defines specific named, aliased, or default exports from modules. This allows fine-grained control over which identifiers are auto-imported into the project scope.

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: [
        'vue',
        {
          '@vueuse/core': ['useMouse', 'useFetch', 'useStorage'],
          'lodash-es': [['debounce', 'debounceFn'], ['throttle', 'throttleFn'], 'cloneDeep'],
          'axios': [['default', 'axios']],
          '@/utils': ['formatDate', 'formatCurrency', 'validateEmail'],
        },
      ],
    }),
  ],
}
```

--------------------------------

### Configure Auto-Import for Vue 3 with Vite

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

This comprehensive configuration sets up unplugin-auto-import for a Vue 3 project using Vite. It includes automatic imports for Vue, Vue Router, VueUse, composables, directives, and component resolvers like Element Plus. The configuration also enables ESLint integration and generates type declaration files and a JSON dump of imported items.

```typescript
// vite.config.ts
import Vue from '@vitejs/plugin-vue'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    Vue(),
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        '@vueuse/core',
        {
          from: 'vue-router',
          imports: ['RouteLocationRaw'],
          type: true,
        },
      ],
      dirs: [
        './src/composables/**',
        './src/stores',
        './src/directives/**',
      ],
      dirsScanOptions: {
        types: true,
      },
      resolvers: [ElementPlusResolver()],
      vueTemplate: true,
      vueDirectives: {
        isDirective: (path) => path.includes('/directives/'),
      },
      dts: './src/auto-imports.d.ts',
      eslintrc: {
        enabled: true,
        filepath: './.eslintrc-auto-import.json',
      },
      dumpUnimportItems: './auto-imports.json',
    }),
  ],
})
```

--------------------------------

### Configure Type-Only Imports

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Enables automatic import of TypeScript types by specifying the source module and setting the type property to true. This ensures type definitions are available without manual import statements.

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        { from: 'vue-router', imports: ['RouteLocationRaw', 'RouteRecordRaw', 'NavigationGuard'], type: true },
        { from: 'vue', imports: ['PropType', 'ComputedRef', 'Ref'], type: true },
        { from: '@vueuse/core', imports: ['MaybeRef', 'MaybeRefOrGetter', 'UseFetchReturn'], type: true },
      ],
    }),
  ],
}
```

--------------------------------

### Dump Auto-Import Items to JSON

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Exports the list of all auto-imported items to a JSON file. This is useful for debugging the generated import map or for consumption by external tooling.

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router'],
      dirs: ['./src/composables/**'],
      dumpUnimportItems: './auto-imports.json',
    }),
  ],
}
```

--------------------------------

### Configure Vue Directives Auto-Import

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Enables the automatic import of Vue directives by defining a custom matcher function within the plugin configuration. This allows components to use directives without explicit import statements.

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['vue'],
      dirs: ['./src/directives/**'],
      vueDirectives: {
        isDirective(normalizeImportFrom, _importEntry) {
          return normalizeImportFrom.includes('/directives/')
        },
      },
    }),
  ],
}
```

--------------------------------

### Enable Vue Template Auto-Import

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Enables the auto-import feature directly within Vue Single File Component templates, allowing APIs to be used without explicit imports.

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['vue', '@vueuse/core'],
      vueTemplate: true
    })
  ]
}
```

--------------------------------

### Ignore Specific Imports and Declarations

Source: https://context7.com/unplugin/unplugin-auto-import/llms.txt

Prevents specific identifiers from being auto-imported or excluded from generated TypeScript declaration files. Supports both string matching and regex patterns.

```typescript
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['vue', '@vueuse/core'],
      ignore: [
        'useMouse',
        'useFetch',
        /^use.*Deprecated$/,
      ],
      ignoreDts: [
        'internalHelper',
        /^_/,
      ],
    }),
  ],
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.