Ch 02. 자동 임포트와 컴포넌트 작성

Nuxt.js로 처음 프로젝트를 만들면 한 가지 이상한 점을 발견하게 됩니다. import 구문 없이 ref, computed, useFetch를 사용하고 있고, 직접 만든 컴포넌트도 import 없이 템플릿에 나타납니다. 이게 바로 Nuxt의 자동 임포트(auto-import) 기능입니다.

자동 임포트의 원리

Nuxt는 빌드 시점에 특정 폴더를 스캔해서 임포트 구문을 자동으로 생성합니다. 대상 폴더는 다음 세 가지입니다.

• components/ — Vue 컴포넌트
• composables/ — Composable 함수
• utils/ — 유틸리티 함수

Vue 3의 ref, computed, reactive 같은 API와 Nuxt 내장 Composable(useFetch, useRoute, useRouter 등)도 자동으로 임포트됩니다. 덕분에 파일마다 반복되는 임포트 구문을 작성할 필요가 없습니다.

컴포넌트 네이밍 규칙

components/ 폴더에 PascalCase로 파일을 만들면 자동으로 등록됩니다. 등록된 컴포넌트는 PascalCase와 kebab-case 두 가지 형태 모두 사용할 수 있습니다.

components/
├── TheHeader.vue       → <TheHeader /> 또는 <the-header />
├── BaseButton.vue      → <BaseButton /> 또는 <base-button />
└── HeavyChart.vue      → <HeavyChart /> 또는 <heavy-chart />

중첩 폴더의 경우 폴더명이 컴포넌트 이름 앞에 붙습니다. components/ui/Modal.vue는 <UiModal />로 사용합니다.

Lazy 컴포넌트로 지연 로딩하기

컴포넌트 이름 앞에 Lazy를 붙이면 해당 컴포넌트를 처음 렌더링할 때까지 번들 로딩을 미룹니다. 차트나 모달처럼 초기 화면에 필요하지 않은 무거운 컴포넌트에 유용합니다.

<!-- 자동 임포트 — import 문 불필요 -->
<template>
  <TheHeader />
  <LazyHeavyChart v-if="showChart" />
</template>

<script setup lang="ts">
const showChart = ref(false)
</script>

showChart가 false인 동안 HeavyChart 컴포넌트의 코드는 로드되지 않습니다.

타입 확인과 추가 폴더 등록

자동 임포트된 컴포넌트의 타입 정보는 .nuxt/components.d.ts에서 확인할 수 있습니다. Nuxt가 빌드 시 자동으로 생성하는 파일입니다.

기본 폴더 외에 추가로 자동 임포트할 경로가 있다면 nuxt.config.ts에서 등록합니다.

// nuxt.config.tsexport default defineNuxtConfig({  components: [    { path: '~/components', pathPrefix: false },    { path: '~/features/auth/components', prefix: 'Auth' }  ]})

prefix 옵션을 사용하면 해당 폴더의 모든 컴포넌트에 지정한 접두사가 자동으로 붙습니다.