[Nuxt3] 개발환경 구성 Get started

Nuxt 3 공식 문서

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

Installation · Get Started with Nuxt

0. node version

# node version
nvm install 20
nvm use 20
npm -v

1. create nuxt

빈 폴더 하나를 만들고, 터미널에서 pnpm으로 설치했다.

npx nuxi@latest init nuxt3_lecture

 

2. package manager 선택

npm 선택

 

3. package.json 수정 (nuxi)

nuxt3부터는 nuxt 명령어가 아닌 'nuxi' 명령어를 권장한다고 한다.

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxi dev",
    "generate": "nuxi generate",
    "preview": "nuxi preview",
    "postinstall": "nuxi prepare"
  },
  "devDependencies": {
    "nuxt": "^3.9.0",
    "typescript": "^5.3.3",
    "vue": "^3.4.3",
    "vue-router": "^4.2.5",
    "vue-tsc": "^1.8.27"
  }
}

 

4. 프로젝트 실행 npm run dev

# build nuxt project
npm run dev

5. nuxt init page

localhost:3000에서 nuxt welcome page를 확인할 수 있다.

6. typescript 세팅

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  typescript: {
    shim: false,
    typeCheck: true
  }
})

 

개발 시 type check 활성화

npm install -D vue-tsc typescript

# type check 활성화
npx nuxi typecheck

! 에러 발생

vue-tsc와 typescript 버전이 맞지 않아서 발생하는 문제라고 한다.

npm install -D vue-tsc@latest typescript@latest

# type check 활성화
npx nuxi typecheck

 

이제 type error를 잡아주는 것을 확인할 수 있다.