프로그레시브
웹 프레임워크

고품질 웹 애플리케이션을 만들 수 있는 Nuxt는 Vue.js 기반 풀스택 개발을 직관적으로 만들어주는 오픈 소스 프레임워크입니다.

app.vue

<script setup lang="ts">
const version = 4
</script>

<template>
  <h1>
    Hello Nuxt {{ version }}!
  </h1>
</template>

<style scoped>
h1 {
  font-size: 3rem;
}
</style>

pages/index.vue

<template>
  <h1>Index page</h1>
  <NuxtLink to="/blog/hello-world">
    Go to blog post
  </NuxtLink>
</template>

pages/index.vue

<script setup lang="ts">
const { data: page } = await useFetch('/api/cms/home')
</script>

<template>
  <h1>{{ page.title }}</h1>
  <NuxtLink to="/blog/hello-world">
    Go to blog post
  </NuxtLink>
</template>

app.vue

<script setup>
const message = ref('Nuxt')
const hello = () => sayHello(message.value)
</script>

<template>
  <main>
    <h1>Demo with auto imports</h1>
    <form @submit.prevent="hello">
      <MyInput v-model="message" />
      <button type="submit">Say Hello</button>
    </form>
  </main>
</template>

server/api/hello.ts

export default defineEventHandler((event) => {
  return {
    message: 'Hello World'
  }
})

세계 유수 기업들이 선택한 기술

성장 단계에 맞춰 기능 확장

Nuxt는 뛰어난 개발자 경험과 함께 필요에 맞게 확장되도록 설계되었습니다. 간단한 랜딩 페이지부터 개발자 수백 명 규모의 복잡한 웹 애플리케이션까지 구축할 수 있습니다.

제로 구성
Vue 또는 TypeScript로 즉시 코딩을 시작하십시오 — Nuxt가 모든 설정을 처리합니다.
렌더링 모드
서버 사이드 렌더링, 클라이언트 사이드 렌더링, 정적 사이트 생성까지 페이지 단위로 원하는 방식을 선택할 수 있습니다.
라우팅 & 레이아웃
파일 기반 라우팅 시스템을 활용해 복잡한 URL 기반 뷰를 구축하고 구성 요소를 재사용하여 성능을 최적화하십시오.
데이터 패칭
Vue 컴포넌트를 async로 만들고 데이터를 기다리십시오. Nuxt는 범용 데이터 패칭을 위한 강력한 composable을 제공합니다.
오류 처리
내장 핸들러와 사용자 정의 오류 페이지로 애플리케이션 오류를 추적하고 처리하십시오.
전환 효과
레이아웃, 페이지, 컴포넌트 간 부드러운 전환을 구현하십시오.
에셋 & 스타일
자동 이미지, 폰트, 스크립트 최적화를 통해 더욱 효율적으로 작업하십시오.
SEO & 메타 태그
검색 엔진에서 완전히 색인될 수 있는 프로덕션 준비 완료 애플리케이션을 생성하십시오.
모듈형 구조
200개 이상의 모듈로 Nuxt 기능을 확장하여 개발 속도를 높이십시오.
미들웨어
페이지 렌더링 전에 보호 규칙 또는 사용자 정의 로직(현지화, A/B 테스트 등)을 추가하십시오.
TypeScript 기반 타입 안정성
자동 생성되는 타입과 tsconfig.json으로 타입 안전한 코드를 작성하십시오.
지금 바로 Nuxt 깊이 알아보기
문서 읽기 시작