Vue 생태계의 풀스택 중심,
Nuxt.js
Vue 위에 SSR, SSG, 자동 임포트, 파일 기반 라우팅, 서버 API까지 더한 풀스택 프레임워크. Next.js가 React에 하는 것을 Nuxt가 Vue에 한다. 그런데 Vue 특유의 친근함이 더해져 훨씬 편안하다.
Nuxt의 핵심 철학은 "설정보다 관습(Convention over Configuration)"이다. 폴더 구조를 따르면 라우팅, 자동 임포트, 상태 관리가 자동으로 작동한다. 개발자는 설정 파일과 씨름하는 대신 기능 구현에 집중할 수 있다.
Nuxt의 자동화 마법
Nuxt가 가장 사랑받는 이유 중 하나는 자동 임포트(Auto Imports)다. components/의 컴포넌트, composables/의 Composable, Vue의 ref, computed 등을 import 선언 없이 바로 사용할 수 있다.
<!-- import 선언 없이 바로 사용 -->
<script setup>
// ref, computed, useState 등 — import 불필요
const count = ref(0)
const doubled = computed(() => count.value * 2)
// composables/useUser.js의 함수도 자동 임포트
const { user, logout } = useUser()
</script>
<template>
<!-- components/UserCard.vue — import 없이 바로 사용 -->
<UserCard :user="user" />
</template>파일 기반 라우팅
pages/ 폴더 구조가 URL이 된다. vue-router 설정 없이 파일만 만들면 라우팅이 완성된다.
데이터 페칭: useFetch와 useAsyncData
Nuxt는 SSR과 클라이언트 모두에서 안전하게 데이터를 가져오는 내장 Composable을 제공한다. 서버와 클라이언트 양쪽에서 동일하게 동작하며, 중복 요청을 자동으로 방지한다.
<script setup>
// useFetch — URL 기반의 편리한 페칭
const { data: posts, pending, error } = await useFetch('/api/posts')
// useAsyncData — 복잡한 로직을 위한 더 유연한 옵션
const { data: user } = await useAsyncData('user', () =>
$fetch(`/api/users/${userId}`)
)
// 반응형 파라미터와 함께 사용
const route = useRoute()
const { data: post } = await useFetch(
() => `/api/posts/${route.params.slug}`
)
</script>페이로드 공유: useFetch로 서버에서 가져온 데이터는 HTML에 직렬화되어 클라이언트에 전달된다. 클라이언트는 동일한 요청을 다시 보내지 않는다. SSR의 비효율을 자동으로 해결한다.
서버 API: server/ 디렉토리
server/api/ 폴더에 파일을 만들면 자동으로 API 엔드포인트가 생성된다. Nitro 서버 엔진 위에서 동작하며, 데이터베이스 접근, 인증 등 서버 로직을 직접 작성할 수 있다.
// server/api/posts/index.get.ts
import { db } from '~/server/db'
export default defineEventHandler(async (event) => {
const posts = await db.post.findMany()
return posts
})// server/api/posts/index.post.ts
export default defineEventHandler(async (event) => {
const body = await readBody(event)
// 유효성 검사
if (!body.title) {
throw createError({ statusCode: 400, message: '제목이 필요합니다' })
}
const post = await db.post.create({ data: body })
return post
})Nuxt 모듈 생태계
Nuxt의 강점 중 하나는 모듈 생태계다. nuxt.config.ts에 모듈을 추가하는 것만으로 기능을 통합할 수 있다.
@nuxt/content
Markdown, YAML, JSON 파일을 데이터베이스처럼 쿼리한다. 블로그, 문서 사이트에 최적.
@nuxt/image
이미지 최적화, WebP 변환, 레이지 로딩을 자동화한다. Next.js의 Image 컴포넌트와 유사.
@pinia/nuxt
Pinia를 Nuxt와 통합. SSR 환경에서 상태 직렬화와 수화(hydration)를 자동 처리한다.
@nuxtjs/i18n
다국어 라우팅, 번역 파일 자동 로딩, Vue i18n 통합을 설정 몇 줄로 완성한다.
렌더링 모드 선택
Nuxt는 라우트별로 렌더링 전략을 다르게 지정할 수 있다. 하나의 앱에서 SSR, SSG, SPA를 혼합하는 하이브리드 렌더링이 가능하다.
// nuxt.config.ts
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true }, // SSG
'/blog/**': { isr: 3600 }, // ISR (1시간)
'/dashboard/**': { ssr: false }, // SPA (클라이언트 전용)
'/api/**': { cors: true } // API 라우트 CORS
}
})Next.js vs Nuxt 비교
| 항목 | Next.js | Nuxt |
|---|---|---|
| 기반 프레임워크 | React | Vue |
| 자동 임포트 | 제한적 | 컴포넌트, Composable, Vue API 전체 |
| 서버 엔진 | Next.js 자체 | Nitro (범용, 매우 빠름) |
| 모듈 생태계 | 풍부함 | 공식 모듈 중심, 통합 간편 |
| 학습 곡선 | 중간 (React 알면 빠름) | 낮음 (Vue 알면 매우 빠름) |
Nuxt는 Vue 개발자에게 Next.js보다 훨씬 자연스러운 풀스택 경험을 제공한다. 자동 임포트, 직관적인 디렉토리 구조, 강력한 모듈 생태계가 개발 속도를 크게 높인다. Vue 기반의 서비스를 풀스택으로 확장하고 싶다면 Nuxt는 사실상 유일한 선택이다.
댓글