강력한 Auto-imports와 Composables 활용

Nuxt의 가장 큰 마법 중 하나는 Auto-imports(자동 임포트)입니다. composables/와 utils/ 폴더에 파일을 생성하고 함수를 export하기만 하면, 애플리케이션 어디에서든 import 문 없이 즉시 사용할 수 있습니다.

이 기능은 Vue의 ref, computed 같은 내장 함수뿐만 아니라 여러분이 직접 만든 커스텀 함수에도 동일하게 적용되어, 코드 상단의 지저분한 import 선언문들을 완전히 제거해 줍니다.

<!-- ==========================================
// 📂 composables/useMouse.ts
// 파일명이 카멜케이스이면 함수명과 일치시키는 것이 좋습니다.
// ========================================== -->
<script>
// 외부 라이브러리의 컴포저블을 래핑할 때도 유용합니다.
export const useMouse = () => {
  // ref, onMounted, onUnmounted 도 별도 import 없이 바로 사용 가능!
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}
</script>

<!-- ==========================================
// 📂 app.vue (최상위 컴포넌트)
// ========================================== -->
<script>
<template>
  <div class="p-8">
    <h1 class="text-2xl font-bold mb-4">마우스 위치 추적기</h1>
    
    <!-- useMouse에서 반환된 반응형 상태를 바로 바인딩 -->
    <p class="text-xl">X: <span class="text-emerald-500">{{ x }}</span></p>
    <p class="text-xl">Y: <span class="text-emerald-500">{{ y }}</span></p>
  </div>
</template>

<script setup>
// 💡 마법: import { ref } from 'vue' 도 없고, 
// import { useMouse } from '~/composables/useMouse' 도 없습니다!
// Nuxt가 빌드 시점에 자동으로 추적하여 연결해 줍니다.
const { x, y } = useMouse()
</script>
</script>