feat: 위키 저장소 초기 커밋
- CLAUDE.md 운영 규칙 - wiki/ 정리된 지식 페이지 (Nuxt + Claude Code) - raw/ 원본 자료 - reference/ Nuxt 4.x 공식 문서 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
159
reference/4.api/5.kit/4.autoimports.md
Normal file
159
reference/4.api/5.kit/4.autoimports.md
Normal file
@@ -0,0 +1,159 @@
|
||||
---
|
||||
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. |
|
||||
Reference in New Issue
Block a user