자동 임포트

Nuxt Kit은 자동 임포트 작업을 도와주는 다양한 유틸리티를 제공합니다. 이 함수들을 사용하면 직접 만든 유틸, 컴포저블, Vue API를 등록할 수 있습니다.

Nuxt는 헬퍼 함수, 컴포저블, Vue API를 자동으로 임포트하여 애플리케이션 전반에서 명시적으로 임포트하지 않고도 사용할 수 있게 해줍니다. 디렉토리 구조에 따라, 모든 Nuxt 애플리케이션은 자체 컴포저블과 플러그인에 대해서도 자동 임포트를 사용할 수 있습니다.

Nuxt Kit을 사용하면 직접 자동 임포트를 추가할 수도 있습니다. addImports와 addImportsDir을 사용하면 Nuxt 애플리케이션에 임포트를 추가할 수 있습니다. addImportsSources를 사용하면 서드파티 패키지에서 나열된 임포트를 Nuxt 애플리케이션에 추가할 수 있습니다.

이 유틸리티들은 Nuxt에서 사용되는 기본 자동 임포트 메커니즘을 제공하는 unimport에 의해 구동됩니다.

이 함수들은 직접 만든 유틸, 컴포저블, Vue API를 등록하기 위해 설계되었습니다. 페이지, 컴포넌트, 플러그인에 대해서는 각 섹션을 참고하세요: 페이지, 컴포넌트, 플러그인.

Nuxt Kit 유틸리티의 자동 임포트에 관한 Vue School 영상을 시청하세요.

`addImports`

Nuxt 애플리케이션에 임포트를 추가합니다. 수동으로 임포트하지 않아도 Nuxt 애플리케이션에서 임포트를 사용할 수 있게 해줍니다.

사용법

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" })
    );
  }
})

타입

function addImports (imports: Import | Import[]): void

파라미터

imports: 다음 속성을 가진 객체 또는 객체 배열입니다:

속성	타입	필수	설명
`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 { 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'))
  },
})

타입

function addImportsDir (dirs: string | string[], options?: { prepend?: boolean }): void

파라미터

속성	타입	필수	설명
`dirs`	`string \| string[]`	`true`	임포트할 디렉토리 경로의 문자열 또는 문자열 배열입니다.
`options`	`{ prepend?: boolean }`	`false`	임포트에 전달할 옵션입니다. `prepend`가 `true`로 설정되면, 임포트 목록의 앞에 추가됩니다.

`addImportsSources`

나열된 임포트를 Nuxt 애플리케이션에 추가합니다.

사용법

import { defineNuxtModule, addImportsSources } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    addImportsSources({
      from: 'h3',
      imports: [
        'defineEventHandler',
        'getQuery',
        'getRouterParams',
        'readBody',
        'sendRedirect'
      ],
    })
  }
})

타입

function addImportsSources (importSources: ImportSource | ImportSource[]): void

파라미터

importSources: 다음 속성을 가진 객체 또는 객체 배열입니다:

속성	타입	필수	설명
`from`	`string`	`true`	임포트할 모듈 지정자입니다.
`imports`	`PresetImport \| ImportSource[]`	`true`	임포트 이름, 임포트 객체 또는 임포트 소스가 될 수 있는 객체 또는 객체 배열입니다.