Nuxt의 가장 큰 마법 중 하나는 Auto-imports(자동 임포트)입니다. composables/와 utils/ 폴더에 파일을 생성하고 함수를 export하기만 하면, 애플리케이션 어디에서든 import 문 없이 즉시 사용할 수 있습니다.
이 기능은 Vue의 ref, computed 같은 내장 함수뿐만 아니라 여러분이 직접 만든 커스텀 함수에도 동일하게 적용되어, 코드 상단의 지저분한 import 선언문들을 완전히 제거해 줍니다.
<!-- ==========================================
// 📂 app.vue (최상위 컴포넌트)
// ========================================== -->
<template>
<div class="p-8 bg-slate-900 min-h-screen text-white">
<h1 class="text-2xl font-bold mb-4">마우스 위치 추적기</h1>
<!-- useMouse에서 반환된 반응형 상태를 바로 바인딩 -->
<div class="bg-slate-800 p-6 rounded-xl border border-slate-700 font-mono">
<p class="text-xl mb-2 text-slate-300">X: <span class="text-emerald-400 font-black">{{ x }}</span> px</p>
<p class="text-xl text-slate-300">Y: <span class="text-emerald-400 font-black">{{ y }}</span> px</p>
</div>
</div>
</template>
<script setup>
// 💡 마법: import { ref } from 'vue' 도 없고,
// import { useMouse } from '~/composables/useMouse' 도 없습니다!
// Nuxt가 빌드 시점에 자동으로 추적하여 연결해 줍니다.
const { x, y } = useMouse()
</script>
