Auto-imports
Nuxt auto-imports helper functions, composables and Vue APIs to use across your application without explicitly importing them. Based on the directory structure, every Nuxt application can also use auto-imports for its own composables and plugins.
With Nuxt Kit you can also add your own auto-imports. addImports
and addImportsDir
allow you to add imports to the Nuxt application. addImportsSources
allows you to add listed imports from 3rd party packages to the Nuxt application.
These utilities are powered by unimport
, which provides the underlying auto-import mechanism used in Nuxt.
addImports
Add imports to the Nuxt application. It makes your imports available in the Nuxt application without the need to import them manually.
Usage
import { defineNuxtModule, addImports } 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" })
);
}
})
Type
function addImports (imports: Import | Import[]): void
Parameters
imports
: An object or an array of objects with the following properties:
Prop | Type | Required | Description |
---|---|---|---|
name | string | true | Import name to be detected. |
from | string | true | Module specifier to import from. |
priority | number | false | Priority of the import; if multiple imports have the same name, the one with the highest priority will be used. |
disabled | boolean | false | If this import is disabled. |
meta | Record<string, any> | false | Metadata of the import. |
type | boolean | false | If this import is a pure type import. |
typeFrom | string | false | Use this as the from value when generating type declarations. |
as | string | false | Import as this name. |
addImportsDir
Add imports from a directory to the Nuxt application. It will automatically import all files from the directory and make them available in the Nuxt application without the need to import them manually.
Usage
import { defineNuxtModule, addImportsDir, createResolver } 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'))
},
})
Type
function addImportsDir (dirs: string | string[], options?: { prepend?: boolean }): void
Parameters
Prop | Type | Required | Description |
---|---|---|---|
dirs | string | string[] | true | A string or an array of strings with the path to the directory to import from. |
options | { prepend?: boolean } | false | Options to pass to the import. If prepend is set to true , the imports will be prepended to the list of imports. |
addImportsSources
Add listed imports to the Nuxt application.
Usage
import { defineNuxtModule, addImportsSources } from '@nuxt/kit'
export default defineNuxtModule({
setup() {
addImportsSources({
from: 'h3',
imports: [
'defineEventHandler',
'getQuery',
'getRouterParams',
'readBody',
'sendRedirect'
],
})
}
})
Type
function addImportsSources (importSources: ImportSource | ImportSource[]): void
Parameters
importSources: An object or an array of objects with the following properties:
Prop | Type | Required | Description |
---|---|---|---|
from | string | true | Module specifier to import from. |
imports | PresetImport | ImportSource[] | true | An object or an array of objects, which can be import names, import objects or import sources. |
Compatibility
Nuxt Kit provides a set of utilities to help you check the compatibility of your modules with different Nuxt versions.
Components
Nuxt Kit provides a set of utilities to help you work with components. You can register components globally or locally, and also add directories to be scanned for components.