Nuxt

Nuxt는 Vue.js, Nitro, Vite를 기반으로 하는 자유-오픈 소스 자바스크립트 라이브러리이다. Nuxt는 Vue 대신 리액트를 기반으로 하는 유사한 웹 프레임워크인 Next.js에서 영감을 받았다.

Nuxt가 단독으로 Vue를 사용하는 것에 비해 갖는 주요 장점은 유니버설 렌더링 시스템이다. 이 프레임워크는 브라우저 내 싱글 페이지 애플리케이션 (SPA)과 서버 렌더링된 정적 웹 페이지로 작동하며, 서버 렌더링된 페이지가 로드된 후 완전한 SPA로 "하이드레이팅"된다. 이를 통해 웹사이트는 클라이언트 렌더링 애플리케이션의 인터랙티비티 외에도 서버 렌더링 사이트의 검색 엔진 최적화 및 성능 이점을 가질 수 있다. Nuxt는 서버 렌더링 기능을 개발자로부터 크게 추상화하며, 따라서 Vue의 단일 파일 컴포넌트 (SFC) 시스템을 사용하는 전통적인 SPA와 유사한 개발 경험을 가질 수 있다.

주요 유니버설 렌더링 메커니즘 외에도 Nuxt는 경로 기반 라우팅, 핫 모듈 리플레이스먼트 (HMR), 기본 제공 타입스크립트 지원, 미들웨어 및 서버 로직과 같은 많은 다른 이점과 편의 기능을 제공한다.

 기능 

 경로 기반 라우팅 
일반적으로 모든 경로를 수동으로 등록해야 하는 일반 Vue.js 애플리케이션과 달리, Nuxt는 경로 기반 라우팅을 사용하여 애플리케이션의 모든 경로를 자동으로 등록한다.

페이지는 pages/ 폴더에 선언되며, 페이지 파일의 이름이 경로의 이름이 된다. 동적 매개변수는 대괄호를 사용하여 추가할 수 있으며, 캐치올 경로는 자바스크립트의 배열 전개 구문과 매우 유사하게 세 개의 점과 대괄호를 사용하여 추가할 수 있다.

 /pages/about.vue - /about과 일치한다.
 /pages/user/[id].vue - /user 바로 아래의 모든 경로와 일치한다.
 /pages/posts/[...slug].vue - /posts 아래의 모든 경로와 일치한다.
 /pages/admin/[[page]].vue - /admin과 그 바로 아래의 모든 경로와 일치한다.

 자동 임포트 
Nuxt는 대부분의 Vue 컴포지션 API 함수와 composables/ 및 utils/ 폴더의 모든 헬퍼 함수를 자동으로 임포트한다.<script setup>
    // ref는 자동으로 임포트됩니다.
    const count = ref(0);
    // useRoute도 자동으로 임포트됩니다.
    const route = useRoute();
</script>

<template>
    <span>{{ count }}</span>
</template>

 레이아웃 
Nuxt는 SSR 친화적인 레이아웃을 기본으로 지원하며, 이를 통해 유사한 페이지가 헤더 및 푸터와 같은 동일한 기본 템플릿을 사용할 수 있다. 레이아웃은 layouts/ 폴더에 선언되며, 네이티브 Vue 슬롯을 사용하여 작동한다.

Nuxt 프로젝트에서 레이아웃을 활성화하려면, 애플리케이션의 엔트리 포인트인 app.vue가 각 페이지의 레이아웃을 전환하는 NuxtLayout 컴포넌트를 포함해야 한다.<!-- sample app.vue 파일 내용 -->
<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>
</template>기본 레이아웃은 layouts/default.vue에 위치하며, 페이지 콘텐츠를 위한 슬롯을 포함해야 한다.<!-- sample layout 파일 내용 -->
<template>
    <CustomNavbar />
    <slot />
    <CustomFooter />
</template>페이지는 설정 함수 또는 블록에서 definePageMeta 헬퍼를 사용하여 사용자 정의 레이아웃을 사용할 수 있다.<script setup>
definePageMeta({
    layout: "custom",
});
</script>

<template>
    <!-- 이제 사용자 정의 레이아웃의 슬롯을 채웁니다 -->
</template>

 미들웨어 
Nuxt는 애플리케이션에 미들웨어 지원을 추가하여, 내비게이션 변경 사이에 서버 로직을 실행할 수 있도록 한다. 전역 및 페이지별 미들웨어 파일이 모두 지원된다.

미들웨어는 middleware/ 폴더에 선언되며, 현재 및 이전 경로를 매개변수로 받는 함수를 내보낸다. 여기에서  및 와 같은 전역적으로 사용 가능한 헬퍼를 사용하여 내비게이션을 제어할 수 있다.
export default defineNuxtMiddleware((to, from) => {
    // 내비게이션 로직
    if (to.params.id === "0")
        return abortNavigation();
    return navigateTo(`/users/${to.params.id}`);
});

 서버 API 
Nuxt는 server/ 폴더를 사용하여 서버 API 경로 및 핸들러를 생성할 수도 있다. server/api에 배치된 모든 파일은 API 경로가 되고, server/routes에 배치된 모든 파일은 경로 파일이 된다. 차이점은 최종 파일 위치(server/api는 경로에 api 접두사를 추가한다)이다.// server/api/hello.ts
export default defineEventHandler((event) => {
    return {
        some: "data here",
    };
});이는 이제 useFetch 컴포저블을 사용하여 컴포넌트에서 호출할 수 있다.<script setup>
const { data } = await useFetch('/api/hello')
</script>

<template>
  <pre>{{ data }}</pre>
</template>

 같이 보기 
 Vue.js
 웹 프레임워크

 각주 

 외부 링크 
 Nuxt.js website
 Nuxt.js의 GitHub 주소

분류:웹 프레임워크