Nuxt 3는 Vue 3를 기반으로 한 강력한 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 클라이언트 사이드 네비게이션과 같은 기능을 제공합니다. 이 가이드에서는 Nuxt 3의 기본 개념과 프로젝트 설정 방법을 알아봅니다.
- Vue 3 지원: Composition API와 같은 Vue 3의 모든 기능 활용
- 하이브리드 렌더링: SSR, SSG, CSR을 상황에 맞게 유연하게 사용
- 자동 가져오기: 컴포넌트, 컴포지션 API, 헬퍼 함수 자동 임포트
- 파일 기반 라우팅:
pages/ 디렉토리 구조를 기반으로 한 자동 라우팅 - 서버 API: Nitro 엔진 기반의 서버 API 엔드포인트 생성
- 모듈 시스템: 재사용 가능한 모듈로 기능 확장
- TypeScript 지원: 기본 TypeScript 지원
Nuxt 3 프로젝트를 시작하는 가장 쉬운 방법은 nuxi CLI를 사용하는 것입니다:
npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev
기본적인 Nuxt 3 프로젝트 구조는 다음과 같습니다:
my-nuxt-app/
├── .nuxt/ # 빌드된 파일 (자동 생성)
├── app.vue # 앱의 진입점
├── assets/ # 전역 자산 (이미지, 폰트 등)
├── components/ # Vue 컴포넌트
├── composables/ # 컴포지션 함수
├── content/ # 콘텐츠 (Nuxt Content 모듈 사용 시)
├── layouts/ # 레이아웃 컴포넌트
├── middleware/ # 라우트 미들웨어
├── pages/ # 라우트를 생성하는 페이지
├── plugins/ # Vue 플러그인
├── public/ # 정적 파일
├── server/ # 서버 API 엔드포인트 및 미들웨어
├── .gitignore # Git 무시 파일
├── app.config.ts # 앱 런타임 구성
├── nuxt.config.ts # Nuxt 구성 파일
├── package.json # 프로젝트 의존성 및 스크립트
└── tsconfig.json # TypeScript 구성
app.vue는 애플리케이션의 진입점입니다. 기본 레이아웃과 페이지를 렌더링하는 역할을 합니다:
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
Nuxt 3는 pages/ 디렉토리의 구조를 기반으로 자동으로 라우트를 생성합니다:
pages/
├── index.vue # / 라우트
├── about.vue # /about 라우트
└── users/
├── index.vue # /users 라우트
└── [id].vue # /users/:id 동적 라우트
페이지 컴포넌트 예시:
<script setup lang="ts">
const route = useRoute();
const { data } = await useFetch(`/api/users/${route.params.id}`);
</script>
<template>
<div>
<h1>사용자 정보</h1>
<pre>{{ data }}</pre>
</div>
</template>
레이아웃은 여러 페이지에서 공통으로 사용되는 UI 요소를 포함합니다:
<!-- layouts/default.vue -->
<template>
<div>
<header>
<nav>
<NuxtLink to="/">홈</NuxtLink>
<NuxtLink to="/about">소개</NuxtLink>
<NuxtLink to="/users">사용자</NuxtLink>
</nav>
</header>
<main>
<slot />
</main>
<footer>
<p>© 2024 My Nuxt App</p>
</footer>
</div>
</template>
페이지에서 레이아웃 사용:
<script setup lang="ts">
definePageMeta({
layout: 'custom', // custom.vue 레이아웃 사용
});
</script>
Nuxt 3는 서버와 클라이언트 사이드에서 모두 사용할 수 있는 데이터 가져오기 유틸리티를 제공합니다:
<script setup lang="ts">
// 서버 사이드에서 데이터 가져오기
const { data: products } = await useFetch('/api/products');
// 컴포저블 함수로 로직 추출
const useProducts = () => {
return useFetch('/api/products', {
transform: (response) => response.data,
watch: false, // URL 변경 시 다시 가져오지 않음
});
};
// 컴포저블 함수 사용
const { data: products, refresh } = await useProducts();
</script>
server/api/ 디렉토리에 API 엔드포인트를 정의할 수 있습니다:
// server/api/products.ts
export default defineEventHandler(async (event) => {
// 데이터베이스 또는 외부 API에서 데이터 가져오기
const products = await db.getProducts();
return {
data: products,
count: products.length,
};
});
Nuxt 3는 서버와 클라이언트 간에 공
