kit/auto-imports

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

addImports function signature and parameters

The addImports function adds imports to the Nuxt application, making them available without manual imports. Signature: function addImports (imports: Import | Import[]): void. Parameters are Import objects with properties: name (string, required) - import name to be detected; from (string, required) - module specifier to import from; priority (number, optional) - priority of the import, highest priority used if multiple imports have same name; disabled (boolean, optional) - whether import is disabled; meta (Record<string, any>, optional) - metadata of the import; type (boolean, optional) - if import is a pure type import; typeFrom (string, optional) - use as from value when generating type declarations; as (string, optional) - import as this name.

addImports usage example with Storyblok

Example showing addImports registering multiple named exports from @storyblok/vue package: import { addImports, defineNuxtModule } from '@nuxt/kit'; export default defineNuxtModule({ setup (options, nuxt) { const names = ['useStoryblok', 'useStoryblokApi', 'useStoryblokBridge', 'renderRichText', 'RichTextSchema']; names.forEach(name => addImports({ name, as: name, from: '@storyblok/vue' })); } });

addImportsDir function signature and parameters

The addImportsDir function adds imports from a directory to the Nuxt application, automatically importing all files from the directory. Signature: function addImportsDir (dirs: string | string[], options?: { prepend?: boolean }): void. Parameters: dirs (string | string[], required) - path or array of paths to directories to import from; options (optional object with prepend boolean property) - if prepend is true, imports will be prepended to the list of imports.

addImportsDir usage example

Example showing addImportsDir registering composables from runtime directory: import { addImportsDir, createResolver, defineNuxtModule } from '@nuxt/kit'; export default defineNuxtModule({ meta: { name: '@vueuse/motion', configKey: 'motion' }, setup (options, nuxt) { const resolver = createResolver(import.meta.url); addImportsDir(resolver.resolve('./runtime/composables')); } });

addImportsSources function signature and parameters

The addImportsSources function adds listed imports from 3rd party packages to the Nuxt application. Signature: function addImportsSources (importSources: Preset | Preset[]): void. InlinePreset parameters: from (string, required) - module specifier to import from; imports (PresetImport | ImportSource[], required) - import names, import objects or import sources. PackagePreset parameters: package (string, required) - name of the package.

addImportsSources usage example

Example showing addImportsSources with both PackagePreset and InlinePreset: import { addImportsSources, defineNuxtModule } from '@nuxt/kit'; export default defineNuxtModule({ setup () { addImportsSources([ { package: '@vueuse/core' }, { from: 'h3', imports: ['defineEventHandler', 'getQuery', 'getRouterParams', 'readBody', 'sendRedirect'] } ]); } });

Auto-imports overview

Nuxt Kit provides utilities to work with auto-imports. These utilities are powered by unimport, which provides the underlying auto-import mechanism used in Nuxt. The kit functions addImports, addImportsDir, and addImportsSources allow registering custom utils, composables and Vue APIs. Note that for pages, components and plugins, refer to specific sections in the kit documentation.

Give your agent this brain