Nuxt는 컴포넌트, 컴포저블 및 Vue.js API를 명시적으로 임포트하지 않고도 애플리케이션 전반에서 사용할 수 있도록 자동으로 임포트합니다.

const count = ref(1) // ref는 자동으로 임포트됩니다.

Nuxt는 고유한 디렉토리 구조 덕분에 components/, composables/ 및 utils/를 자동으로 임포트할 수 있습니다.

전통적인 글로벌 선언과는 달리, Nuxt는 타입, IDE 자동 완성 및 힌트를 보존하며, 프로덕션 코드에서 사용되는 것만 포함합니다.

내장 자동 임포트

Nuxt는 데이터 가져오기, 앱 컨텍스트 및 런타임 설정에 접근하고, 상태 관리를 수행하거나 컴포넌트와 플러그인을 정의하기 위해 함수와 컴포저블을 자동으로 임포트합니다.

/* useFetch()는 자동으로 임포트됩니다. */
const { data, refresh, status } = await useFetch('/api/hello')

Vue는 ref나 computed와 같은 반응성 API뿐만 아니라 라이프사이클 훅과 헬퍼를 노출하며, 이는 Nuxt에 의해 자동으로 임포트됩니다.

/* ref()와 computed()는 자동으로 임포트됩니다. */
const count = ref(1)
const double = computed(() => count.value * 2)

Vue 및 Nuxt 컴포저블

Vue와 Nuxt가 제공하는 내장 Composition API 컴포저블을 사용할 때, 많은 컴포저블이 올바른 _컨텍스트_에서 호출되어야 한다는 점을 유의하세요.

컴포넌트 라이프사이클 동안, Vue는 현재 컴포넌트의 임시 인스턴스를 전역 변수로 추적하고, Nuxt는 nuxtApp의 임시 인스턴스를 유사하게 추적한 후 동일한 틱에서 이를 해제합니다. 이는 서버 렌더링 시 두 사용자 간의 공유 참조 누출을 방지하고, 다른 컴포넌트 간의 누출을 방지하기 위해 필수적입니다.

이는 (매우 적은 예외를 제외하고) Nuxt 플러그인, Nuxt 라우트 미들웨어 또는 Vue 설정 함수 외부에서 사용할 수 없음을 의미합니다. 또한, <script setup> 블록 내에서, defineNuxtComponent로 선언된 컴포넌트의 설정 함수 내에서, defineNuxtPlugin 또는 defineNuxtRouteMiddleware 내에서 await를 사용하기 전까지는 동기적으로 사용해야 합니다. 여기서는 await 이후에도 동기 컨텍스트를 유지하기 위해 변환을 수행합니다.

Nuxt instance is unavailable와 같은 오류 메시지가 표시되면, 이는 아마도 Vue 또는 Nuxt 라이프사이클의 잘못된 위치에서 Nuxt 컴포저블을 호출하고 있음을 의미합니다.

오류가 발생하는 코드 예시:

// 컴포저블 외부에서 런타임 설정에 접근하려고 시도
const config = useRuntimeConfig()

export const useMyComposable = () => {
  // 여기서 런타임 설정에 접근
}

작동하는 코드 예시:

export const useMyComposable = () => {
  // 컴포저블이 라이프사이클의 올바른 위치에서 호출되므로,
  // useRuntimeConfig가 여기서 작동합니다.
  const config = useRuntimeConfig()

  // ...
}

디렉토리 기반 자동 임포트

Nuxt는 정의된 디렉토리에 생성된 파일을 직접 자동으로 임포트합니다:

• components/는 Vue 컴포넌트를 위한 디렉토리입니다.
• composables/는 Vue 컴포저블을 위한 디렉토리입니다.
• utils/는 헬퍼 함수 및 기타 유틸리티를 위한 디렉토리입니다.

명시적 임포트

Nuxt는 필요에 따라 임포트를 명시적으로 만들 수 있는 #imports 별칭으로 모든 자동 임포트를 노출합니다:

import { ref, computed } from '#imports'

const count = ref(1)
const double = computed(() => count.value * 2)

자동 임포트 비활성화

컴포저블 및 유틸리티의 자동 임포트를 비활성화하려면 nuxt.config 파일에서 imports.autoImport를 false로 설정할 수 있습니다.

export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

이렇게 하면 자동 임포트가 완전히 비활성화되지만 여전히 #imports에서 명시적 임포트를 사용할 수 있습니다.

자동 임포트 부분 비활성화

ref와 같은 프레임워크 전용 함수는 자동 임포트 상태로 유지하고 싶지만, 사용자 정의 코드(예: 사용자 정의 컴포저블)에 대한 자동 임포트를 비활성화하려면 nuxt.config.ts 파일에서 imports.scan 옵션을 false로 설정할 수 있습니다:

export default defineNuxtConfig({
  imports: {
    scan: false
  }
})

이 구성으로:

• ref, computed, watch와 같은 프레임워크 함수는 수동 임포트 없이도 여전히 작동합니다.
• 사용자 정의 코드, 예를 들어 컴포저블은 파일에서 수동으로 임포트해야 합니다.

자동 임포트된 컴포넌트

Nuxt는 또한 ~/components 디렉토리에서 컴포넌트를 자동으로 임포트하지만, 이는 컴포저블 및 유틸리티 함수의 자동 임포트와는 별도로 구성됩니다.

자신의 ~/components 디렉토리에서 컴포넌트의 자동 임포트를 비활성화하려면 components.dirs를 빈 배열로 설정할 수 있습니다 (모듈에 의해 추가된 컴포넌트에는 영향을 미치지 않습니다).

export default defineNuxtConfig({
  components: {
    dirs: []
  }
})

서드파티 패키지에서의 자동 임포트

Nuxt는 서드파티 패키지에서도 자동 임포트를 허용합니다.

예를 들어, vue-i18n 패키지의 useI18n 컴포저블의 자동 임포트를 다음과 같이 활성화할 수 있습니다:

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: 'vue-i18n',
        imports: ['useI18n']
      }
    ]
  }
})