Nuxt는 컴포넌트, composable 및 Vue.js API를 자동으로 임포트하여, 애플리케이션 전반에서 명시적으로 임포트하지 않고도 사용할 수 있게 해줍니다.
<script setup lang="ts">
const count = ref(1) // ref는 자동으로 임포트됩니다
</script>
의견이 반영된 디렉터리 구조 덕분에, Nuxt는 app/components/, app/composables/ 및 app/utils/를 자동으로 임포트할 수 있습니다.
일반적인 전역 선언과 달리, Nuxt는 타입, IDE 자동 완성 및 힌트를 보존하며, 프로덕션 코드에서 실제로 사용되는 것만 포함합니다.
server 디렉터리에서는 Nuxt가 server/utils/에서 내보낸 함수와 변수를 자동으로 임포트합니다.nuxt.config 파일의 imports 섹션을 설정하여, 커스텀 폴더나 서드파티 패키지에서 내보낸 함수도 자동으로 임포트할 수 있습니다.Nuxt는 데이터 패칭을 수행하고, 앱 컨텍스트와 런타임 설정에 접근하며, 상태를 관리하거나 컴포넌트와 플러그인을 정의하기 위한 함수와 composable을 자동으로 임포트합니다.
<script setup lang="ts">
/* useFetch()는 자동으로 임포트됩니다 */
const { data, refresh, status } = await useFetch('/api/hello')
</script>
Vue는 ref나 computed 같은 반응성 API뿐만 아니라, 라이프사이클 훅과 헬퍼들을 노출하며, 이들은 Nuxt에 의해 자동으로 임포트됩니다.
<script setup lang="ts">
/* ref()와 computed()는 자동으로 임포트됩니다 */
const count = ref(1)
const double = computed(() => count.value * 2)
</script>
Vue와 Nuxt에서 제공하는 내장 Composition API composable을 사용할 때, 이들 중 상당수가 올바른 컨텍스트 에서 호출되어야 한다는 점을 인지해야 합니다.
컴포넌트 라이프사이클 동안, Vue는 전역 변수를 통해 현재 컴포넌트의 임시 인스턴스를 추적하고(마찬가지로 Nuxt는 nuxtApp의 임시 인스턴스를 추적합니다), 같은 틱에서 이를 해제합니다. 이는 서버 렌더링 시, 요청 간 상태 오염(두 사용자 간에 공유 참조가 누출되는 것)을 방지하고, 서로 다른 컴포넌트 간 누수를 방지하기 위해 필수적입니다.
이는 (극히 일부 예외를 제외하고) Nuxt 플러그인, Nuxt 라우트 미들웨어 또는 Vue setup 함수 외부에서는 이들을 사용할 수 없다는 의미입니다. 더 나아가, 이들을 동기적으로 사용해야 합니다. 즉, <script setup> 블록, defineNuxtComponent로 선언된 컴포넌트의 setup 함수, defineNuxtPlugin 또는 defineNuxtRouteMiddleware 내부를 제외하고는, composable을 호출하기 전에 await를 사용할 수 없습니다. 이러한 곳에서는 await 이후에도 동기 컨텍스트를 유지하기 위한 변환을 수행합니다.
Nuxt instance is unavailable 같은 에러 메시지를 받는다면, 이는 아마도 Vue 또는 Nuxt 라이프사이클에서 잘못된 위치에서 Nuxt composable을 호출하고 있다는 의미일 것입니다.
defineComponent 대신 defineNuxtComponent로 컴포넌트를 감싸야 합니다.깨지는 코드 예시:
// composable 외부에서 런타임 설정에 접근하려고 시도
const config = useRuntimeConfig()
export const useMyComposable = () => {
// 여기에서 런타임 설정에 접근
}
동작하는 코드 예시:
export const useMyComposable = () => {
// composable이 라이프사이클에서 올바른 위치에서 호출되기 때문에,
// 여기에서는 useRuntimeConfig가 정상 동작합니다
const config = useRuntimeConfig()
// ...
}
Nuxt는 정의된 디렉터리에 생성된 파일을 직접 자동 임포트합니다:
app/components/ 는 Vue 컴포넌트를 위해 사용됩니다.app/composables/ 는 Vue composable을 위해 사용됩니다.app/utils/ 는 헬퍼 함수 및 기타 유틸리티를 위해 사용됩니다.ref와 computed는 컴포넌트 <template>에서 언래핑되지 않습니다.Nuxt는 모든 자동 임포트를 #imports 별칭으로 노출하며, 필요하다면 이를 사용해 임포트를 명시적으로 할 수 있습니다:
<script setup lang="ts">
import { computed, ref } from '#imports'
const count = ref(1)
const double = computed(() => count.value * 2)
</script>
composable과 유틸리티의 자동 임포트를 비활성화하려면, nuxt.config 파일에서 imports.autoImport를 false로 설정하면 됩니다.
export default defineNuxtConfig({
imports: {
autoImport: false,
},
})
이렇게 하면 자동 임포트가 완전히 비활성화되지만, 여전히 #imports에서 명시적 임포트를 사용하는 것은 가능합니다.
ref 같은 프레임워크 전용 함수는 계속 자동 임포트되도록 유지하면서, 자체 코드(예: 커스텀 composable)에 대한 자동 임포트만 비활성화하고 싶다면, nuxt.config.ts 파일에서 imports.scan 옵션을 false로 설정할 수 있습니다:
export default defineNuxtConfig({
imports: {
scan: false,
},
})
이 설정을 사용하면:
ref, computed, watch 같은 프레임워크 함수는 여전히 수동 임포트 없이 동작합니다.imports.scan: false를 사용하는 경우, 이러한 부작용을 이해하고 이에 맞게 아키텍처를 조정해야 합니다.Nuxt는 또한 ~/components 디렉터리의 컴포넌트를 자동으로 임포트하지만, 이는 composable 및 유틸리티 함수의 자동 임포트와는 별도로 설정됩니다.
자신의 ~/components 디렉터리에서 컴포넌트 자동 임포트를 비활성화하려면, components.dirs를 빈 배열로 설정할 수 있습니다(단, 이는 모듈이 추가한 컴포넌트에는 영향을 주지 않습니다).
export default defineNuxtConfig({
components: {
dirs: [],
},
})
Nuxt는 서드파티 패키지로부터의 자동 임포트도 허용합니다.
예를 들어, vue-i18n 패키지에서 useI18n composable의 자동 임포트를 다음과 같이 활성화할 수 있습니다:
export default defineNuxtConfig({
imports: {
presets: [
{
from: 'vue-i18n',
imports: ['useI18n'],
},
],
},
})