useAsyncData·파생 상태·SEO·상태별 UI를 업무형 화면으로 통합합니다.
서버에서 필요한 데이터를 준비하고 computed로 파생값을 계산하며 문서 메타와 사용자 상태를 함께 구성합니다.
실제 프로젝트에서는 API 계층, 인증·인가, cache key, 오류 관측과 컴포넌트 테스트를 분리합니다.
목록이 커지면 안정적 정렬과 cursor pagination을 적용합니다.
페이지 하나에 데이터 접근, 권한, 변환과 모든 UI 세부 구현을 누적하지 마세요.
로컬 프로젝트에서 확인해보세요마감 임박 필터와 빈 결과 문구를 추가하세요.
<script setup>
const {
data: courses,
status,
error,
} = await useAsyncData("dashboard", async () => [
{ id: "nuxt", title: "Nuxt", done: 12, total: 18 },
{ id: "vue", title: "Vue", done: 18, total: 18 },
]);
const completed = computed(
() => courses.value?.filter((c) => c.done === c.total).length ?? 0,
);
useSeoMeta({ title: "학습 대시보드", description: "Nuxt 학습 현황" });
</script>
<template>
<main>
<h1>학습 대시보드</h1>
<p v-if="status === 'pending'">준비 중...</p>
<p v-else-if="error" role="alert">조회 실패</p>
<section v-else>
<p>완료 {{ completed }}/{{ courses.length }}</p>
<ul>
<li v-for="c in courses" :key="c.id">
<b>{{ c.title }}</b> {{ c.done }}/{{ c.total }}
</li>
</ul>
</section>
</main>
</template>