Nuxt는 헬퍼 함수, composable, Vue API를 자동으로 임포트하여 애플리케이션 전역에서 명시적으로 임포트하지 않고도 사용할 수 있게 해 줍니다. 디렉터리 구조를 기반으로, 모든 Nuxt 애플리케이션은 자체 composable 및 플러그인에 대해서도 자동 임포트를 사용할 수 있습니다.
Nuxt Kit을 사용하면 자신만의 자동 임포트도 추가할 수 있습니다. addImports와 addImportsDir를 사용하면 Nuxt 애플리케이션에 임포트를 추가할 수 있습니다. addImportsSources는 서드파티 패키지에서 나열된 임포트를 Nuxt 애플리케이션에 추가할 수 있게 해 줍니다.
이 유틸리티들은 Nuxt에서 사용되는 기본 자동 임포트 메커니즘을 제공하는 unimport에 의해 동작합니다.
addImportsNuxt 애플리케이션에 임포트를 추가합니다. 이를 통해 수동으로 임포트할 필요 없이 Nuxt 애플리케이션에서 해당 임포트를 사용할 수 있게 됩니다.
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' }),
)
},
})
function addImports (imports: Import | Import[]): void
imports: 다음 속성을 가진 객체 또는 객체 배열:
| Property | Type | Required | Description |
|---|---|---|---|
name | string | true | 감지할 임포트 이름입니다. |
from | string | true | 임포트할 모듈 식별자입니다. |
priority | number | false | 임포트의 우선순위입니다. 동일한 이름의 임포트가 여러 개 있을 경우, 가장 높은 우선순위를 가진 것이 사용됩니다. |
disabled | boolean | false | 이 임포트를 비활성화할지 여부입니다. |
meta | Record<string, any> | false | 임포트의 메타데이터입니다. |
type | boolean | false | 이 임포트가 순수 타입 임포트인지 여부입니다. |
typeFrom | string | false | 타입 선언을 생성할 때 from 값으로 사용할 문자열입니다. |
as | string | false | 이 이름으로 임포트합니다. |
addImportsDir디렉터리에서 Nuxt 애플리케이션으로 임포트를 추가합니다. 디렉터리 내의 모든 파일을 자동으로 임포트하여, 수동으로 임포트할 필요 없이 Nuxt 애플리케이션에서 사용할 수 있게 합니다.
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'))
},
})
function addImportsDir (dirs: string | string[], options?: { prepend?: boolean }): void
| Property | Type | Required | Description |
|---|---|---|---|
dirs | string | string[] | true | 임포트할 디렉터리 경로를 나타내는 문자열 또는 문자열 배열입니다. |
options | { prepend?: boolean } | false | 임포트에 전달할 옵션입니다. prepend가 true로 설정되면, 임포트 목록의 앞쪽에 추가됩니다. |
addImportsSources나열된 임포트를 Nuxt 애플리케이션에 추가합니다.
import { addImportsSources, defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
setup () {
addImportsSources({
from: 'h3',
imports: [
'defineEventHandler',
'getQuery',
'getRouterParams',
'readBody',
'sendRedirect',
],
})
},
})
function addImportsSources (importSources: ImportSource | ImportSource[]): void
importSources: 다음 속성을 가진 객체 또는 객체 배열:
| Property | Type | Required | Description |
|---|---|---|---|
from | string | true | 임포트할 모듈 식별자입니다. |
imports | PresetImport | ImportSource[] | true | 임포트 이름, 임포트 객체 또는 임포트 소스가 될 수 있는 객체 또는 객체 배열입니다. |