Nuxt3 사용법 (프로젝트 생성 및 디렉토리 구조)

현재 맡은 프로젝트들이 모두 Nuxt2를 사용하고 있다.

Nuxt3는 글 작성일 기준, RC 버전으로 출시되어 있는데

언젠가는 마이그레이션이 필요할 것 같아서 공식 문서를 보고 틈틈이 공부해보려고 한다.

 

Prerequisites

• Node.js (버전 14.16이거나 16.11이상으로!)
• VS Code
• Volar Extension (VS Code에서 Vue Language Features (Volar), TypeScript Vue Plugin (Volar) 설치)

 

프로젝트 생성

터미널에서 아래의 명령어로 프로젝트를 생성한다. (Nuxt2 프로젝트를 생성할 때보다 훨씬 빠르고 간단하더라구요)

npx nuxi init [앱 이름 ex.nuxt-app]

 

Nuxt2와 다르게 pages나 middleware등의 디렉토리는 따로 없는 걸 보니, 직접 만들어주면 되는 것 같네요!

 

dependencies도 설치한다. (저는 Yarn을 선호해서 yarn install)

yarn install

 

이제 dev 모드로 실행하면 된다.

yarn dev -o

 

Nuxt의 웰컴 페이지를 볼 수 있다.

 

 

scss를 사용하기 위해 설치

yarn add sass

 

 

Directory 구조 (작성중.. 계속 추가 예정)

app.vue

nuxt3 application의 메인 컴포넌트.

nuxt3에서는 pages/ 디렉토리가 옵셔널해서

vue-router가 필요 없는 사이트를 작업할 때,

혹은 랜딩 페이지를 작업할 때이곳에 작업하면 되도록 한 것 같다.

 

nuxt2에서는 pages의 root index.vue를 메인 컴포넌트로 사용했던 것 같은데

굳이 pages/를 만들지 않고 사용할 수 있도록 한다는 이야기 같다.

 

pages/가 필요 없는 경우

<template>
  <h1>HiHi</h1>
</template>

 

pages/를 사용하는 경우

<template>
  <div>
    <NuxtLayout>
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

Nuxt3에서는 <Suspense>를 <NuxtPage>안에 사용한다고 한다. single root element안에 사용하기를 권장한다고 하는데

아직 무슨 말인지 잘 모르겠어서 직접 써봐야할 것 같다

app.vue에 담기는 js, css는 글로벌하게 사용된다고 한다.

(기존에는 nuxt.config.js 담아서 글로벌하게 사용가능하도록 했던 부분을 app.vue에서 하는 것 같다)

 

 

 

TODO

타입스크립트로 Nuxt사용하는 방법 공부(지금까지는 자바스크립트로만 사용하다보니..)

 

 

Nuxt 공식 홈페이지의 아래 문서를 보고 작성했습니다🙂

https://nuxt.com/docs/getting-started/installation