gil
5f664546cf
- CLAUDE.md 운영 규칙 - wiki/ 정리된 지식 페이지 (Nuxt + Claude Code) - raw/ 원본 자료 - reference/ Nuxt 4.x 공식 문서 Co-authored-by: Cursor <cursoragent@cursor.com>
160 lines
7.1 KiB
Markdown
160 lines
7.1 KiB
Markdown
---
|
|
title: "Auto-imports"
|
|
description: Nuxt Kit provides a set of utilities to help you work with auto-imports. These functions allow you to register your own utils, composables and Vue APIs.
|
|
links:
|
|
- label: Source
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/nuxt/blob/main/packages/kit/src/imports.ts
|
|
size: xs
|
|
---
|
|
|
|
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`](https://github.com/unjs/unimport), which provides the underlying auto-import mechanism used in Nuxt.
|
|
|
|
::note
|
|
These functions are designed for registering your own utils, composables and Vue APIs. For pages, components and plugins, please refer to the specific sections: [Pages](/docs/4.x/api/kit/pages), [Components](/docs/4.x/api/kit/components), [Plugins](/docs/4.x/api/kit/plugins).
|
|
::
|
|
|
|
::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/expanding-nuxt-s-auto-imports?friend=nuxt" target="_blank"}
|
|
Watch Vue School video about Auto-imports Nuxt Kit utilities.
|
|
::
|
|
|
|
## `addImports`
|
|
|
|
Add imports to the Nuxt application. It makes your imports available in the Nuxt app context without the need to import them manually.
|
|
|
|
::tip
|
|
To add imports for the Nitro server context, refer to the [`addServerImports`](/docs/4.x/api/kit/nitro#addserverimports) function.
|
|
::
|
|
|
|
### Usage
|
|
|
|
```ts twoslash
|
|
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' }),
|
|
)
|
|
},
|
|
})
|
|
```
|
|
|
|
### Type
|
|
|
|
```ts
|
|
function addImports (imports: Import | Import[]): void
|
|
```
|
|
|
|
### Parameters
|
|
|
|
`imports`: An object or an array of objects with the following properties:
|
|
|
|
| Property | 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
|
|
|
|
```ts twoslash
|
|
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'))
|
|
},
|
|
})
|
|
```
|
|
|
|
### Type
|
|
|
|
```ts
|
|
function addImportsDir (dirs: string | string[], options?: { prepend?: boolean }): void
|
|
```
|
|
|
|
### Parameters
|
|
|
|
| Property | Type | Required | Description |
|
|
|-----------|------------------------------------|----------|---------------------------------------------------------------------------------------------------------------------|
|
|
| `dirs` | `string \| string[]`{lang="ts"} | `true` | A string or an array of strings with the path to the directory to import from. |
|
|
| `options` | `{ prepend?: boolean }`{lang="ts"} | `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
|
|
|
|
```ts twoslash
|
|
import { addImportsSources, defineNuxtModule } from '@nuxt/kit'
|
|
|
|
export default defineNuxtModule({
|
|
setup () {
|
|
addImportsSources([
|
|
{ package: '@vueuse/core' },
|
|
{
|
|
from: 'h3',
|
|
imports: [
|
|
'defineEventHandler',
|
|
'getQuery',
|
|
'getRouterParams',
|
|
'readBody',
|
|
'sendRedirect',
|
|
],
|
|
},
|
|
])
|
|
},
|
|
})
|
|
```
|
|
|
|
### Type
|
|
|
|
```ts
|
|
function addImportsSources (importSources: Preset | Preset[]): void
|
|
```
|
|
|
|
### Parameters
|
|
|
|
**importSources**: An object or an array of objects with the following properties:
|
|
|
|
- InlinePreset
|
|
|
|
| Property | Type | Required | Description |
|
|
|-----------|---------------------------------------------|----------|------------------------------------------------------------------------------------------------|
|
|
| `from` | `string` | `true` | Module specifier to import from. |
|
|
| `imports` | `PresetImport \| ImportSource[]`{lang="ts"} | `true` | An object or an array of objects, which can be import names, import objects or import sources. |
|
|
|
|
- PackagePreset
|
|
|
|
| Property | Type | Required | Description |
|
|
|-----------|---------------------------------------------|----------|------------------------------------------------------------------------------------------------|
|
|
| `package` | `string` | `true` | Name of the package. |
|