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

Nuxt Kit을 사용하면 여러분만의 자동 임포트를 추가할 수도 있습니다. addImports와 addImportsDir은 Nuxt 애플리케이션에 임포트를 추가할 수 있게 해줍니다. addImportsSources는 서드 파티 패키지에서 나열된 임포트를 Nuxt 애플리케이션에 추가할 수 있게 해줍니다.

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

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: 다음 속성을 가진 객체 또는 객체 배열:

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

매개변수

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: 다음 속성을 가진 객체 또는 객체 배열: