Nuxt 시작하기

Nuxt는 Vue 위에 라우팅·SSR·빌드 설정을 미리 구성해 둔 프레임워크입니다. 설정 없이 바로 개발에 집중할 수 있습니다. 이 강좌는 Nuxt 3 를 기준으로 하며, <script setup>, Nitro 서버 엔진, useFetch 같은 최신 기능을 사용합니다.

학습 목표

• Nuxt가 우리 대신 처리해 주는 일이 무엇인지 이해한다.
• nuxi 로 새 프로젝트를 만들고 개발 서버를 띄운다.
• Nuxt 프로젝트의 기본 디렉터리 구조를 파악한다.
• 파일 기반 라우팅과 useFetch 의 동작을 맛본다.

Nuxt가 해주는 것

순수 Vue로 앱을 만들면 라우터 설정, 서버 렌더링, 번들링, SEO 메타 태그 등을 직접 챙겨야 합니다. Nuxt는 이런 반복 작업을 관례(convention) 로 대신해 줍니다.

직접 해야 하던 일	Nuxt가 대신 해주는 것
라우터 설정	pages/ 폴더 구조로 자동 생성
서버 사이드 렌더링(SSR)	기본 활성화, 하이드레이션까지 처리
API 서버	server/ 폴더 + Nitro 엔진
import 문	컴포넌트·컴포저블 자동 임포트
빌드/번들링	Vite 기반으로 미리 구성

프로젝트 생성

npx nuxi@latest init my-app
cd my-app
npm install
npm run dev

개발 서버가 뜨면 http://localhost:3000 에서 결과를 확인할 수 있습니다.

💡 TIP — nuxi 는 Nuxt 전용 CLI 도구입니다. npx nuxi@latest 로 항상 최신 버전을 내려받아 실행합니다.

디렉터리 구조 개요

처음 만든 프로젝트는 거의 비어 있지만, 다음 폴더들이 약속된 역할을 가집니다.

my-app/
├── pages/          # 라우트가 되는 페이지
├── components/     # 자동 임포트되는 컴포넌트
├── composables/    # 자동 임포트되는 컴포저블
├── layouts/        # 공통 레이아웃
├── server/         # Nitro API·서버 로직
├── public/         # 정적 파일 (그대로 제공)
├── app.vue         # 루트 컴포넌트
└── nuxt.config.ts  # Nuxt 설정

처음에는 app.vue 하나만 있습니다. pages/ 폴더를 만드는 순간 파일 기반 라우팅이 켜집니다.

파일 기반 라우팅

pages/ 폴더 구조가 그대로 URL이 됩니다.

pages/
├── index.vue        →  /
├── about.vue        →  /about
└── tasks/
    ├── index.vue    →  /tasks
    └── [id].vue     →  /tasks/123   (동적 라우트)

<!-- pages/tasks/[id].vue -->
<script setup>
const route = useRoute();
const id = route.params.id;
</script>

<template>
  <h1>일감 #{{ id }}</h1>
</template>

useRoute 는 import 없이 바로 쓸 수 있습니다. Nuxt가 자동으로 임포트해 주기 때문입니다.

데이터 가져오기

<script setup>
// SSR에서 미리 가져오고, 클라이언트로 전달
const { data: tasks } = await useFetch('/api/tasks');
</script>

<template>
  <ul>
    <li v-for="t in tasks" :key="t.id">{{ t.title }}</li>
  </ul>
</template>

💡 TIP — useFetch 는 서버에서 한 번 받아온 데이터를 클라이언트로 넘겨 중복 요청을 막아줍니다. 단순 Vue의 fetch 와 다른 점입니다.

요약

• Nuxt는 Vue에 라우팅·SSR·API·자동 임포트를 더한 풀스택 프레임워크입니다.
• npx nuxi@latest init 으로 프로젝트를 만들고 npm run dev 로 개발합니다.
• pages/ 폴더가 그대로 URL이 되는 파일 기반 라우팅을 씁니다.
• useFetch 로 SSR 친화적인 데이터 패칭을 손쉽게 합니다.

연습문제

1. nuxi 로 lesson-app 이라는 새 프로젝트를 만들고 개발 서버를 띄워 보세요.
2. pages/about.vue 를 만들어 /about 경로에서 자기소개를 보여 주세요.
3. pages/posts/[id].vue 를 만들어 URL의 id 를 화면에 출력해 보세요.

힌트 — 동적 세그먼트는 대괄호 [id] 로 표현하고, 값은 useRoute().params.id 로 읽습니다.