Vue API와 Nuxt composable의 자동 import 범위를 이해합니다.
Nuxt는 ref, computed와 useState, useFetch 같은 API를 자동 import합니다. 빌드 도구가 정적으로 추적하므로 지원 디렉터리와 이름 규칙을 지켜야 합니다.
명시적 import가 없어도 전역 변수가 아니라 Nuxt가 생성한 import이며 타입과 tree-shaking이 적용됩니다.
이름 충돌이 생기면 명시적 import나 별칭으로 출처를 분명히 합니다.
아무 npm 패키지 함수나 자동 import된다고 가정하지 마세요.
로컬 프로젝트에서 확인해보세요computed로 남은 강좌 수를 표시하세요.
<script setup>
const completed = ref(3);
const total = 8;
const percent = computed(() => Math.round((completed.value / total) * 100));
</script>
<template>
<main>
<h1>진도 {{ percent }}%</h1>
<button @click="completed = Math.min(total, completed + 1)">한 강 완료</button>
</main>
</template>