Nuxt는 서버 사이드 렌더링, 파일 기반 라우팅, 자동 임포트, 강력한 모듈 시스템을 제공하는 풀스택 Vue 프레임워크입니다. Nitro를 서버 엔진으로 사용하여 Node.js, 서버리스, 엣지 플랫폼에 범용 배포할 수 있습니다.
이 스킬은 Nuxt 3.x를 기반으로 하며, 2026-01-28에 생성되었습니다.
핵심
| 주제 | 설명 | 참고 |
|---|---|---|
| 디렉토리 구조 | 프로젝트 폴더 구조, 규칙, 파일 구성 | core-directory-structure |
| 설정 | nuxt.config.ts, app.config.ts, 런타임 설정, 환경 변수 | core-config |
| CLI 명령어 | 개발 서버, 빌드, 생성, 미리보기, 유틸리티 명령어 | core-cli |
| 라우팅 | 파일 기반 라우팅, 동적 라우트, 내비게이션, 미들웨어, 레이아웃 | core-routing |
| 데이터 페칭 | useFetch, useAsyncData, $fetch, 캐싱, 갱신 | core-data-fetching |
| 모듈 | Nuxt 모듈 생성 및 사용, Nuxt Kit 유틸리티 | core-modules |
| 배포 | Nitro, Vercel, Netlify, Cloudflare를 통한 플랫폼 독립적 배포 | core-deployment |
기능
| 주제 | 설명 | 참고 |
|---|---|---|
| 컴포저블 자동 임포트 | Vue API, Nuxt 컴포저블, 사용자 정의 컴포저블, 유틸리티 | features-composables |
| 컴포넌트 자동 임포트 | 컴포넌트 이름 지정, 지연 로딩, 하이드레이션 전략 | features-components-autoimport |
| 내장 컴포넌트 | NuxtLink, NuxtPage, NuxtLayout, ClientOnly 등 | features-components |
| 상태 관리 | useState 컴포저블, SSR 친화적 상태, Pinia 통합 | features-state |
| 서버 라우트 | API 라우트, 서버 미들웨어, Nitro 서버 엔진 | features-server |
렌더링
| 주제 | 설명 | 참고 |
|---|---|---|
| 렌더링 모드 | 범용(SSR), 클라이언트 사이드(SPA), 하이브리드 렌더링, 라우트 규칙 | rendering-modes |
모범 사례
| 주제 | 설명 | 참고 |
|---|---|---|
| 데이터 페칭 패턴 | 효율적인 페칭, 캐싱, 병렬 요청, 오류 처리 | best-practices-data-fetching |
| SSR 및 하이드레이션 | 컨텍스트 누수, 하이드레이션 불일치, 컴포저블 패턴 방지 | best-practices-ssr |
고급
| 주제 | 설명 | 참고 |
|---|---|---|
| 레이어 | 재사용 가능한 레이어로 애플리케이션 확장 | advanced-layers |
| 생명주기 훅 | 빌드 타임, 런타임, 서버 훅 | advanced-hooks |
| 모듈 작성 | Nuxt Kit으로 게시 가능한 Nuxt 모듈 생성 | advanced-module-authoring |