[ Frontend ]/Vue.js & Nuxt.js

[Nuxt3] 개발환경 구성 Get started

2025. 3. 8. 22:56
목차
  1. 0. node version
  2. 1. create nuxt
  3. 2. package manager 선택
  4. 3. package.json 수정 (nuxi)
  5. 4. 프로젝트 실행 npm run dev
  6. 5. nuxt init page
  7. 6. typescript 세팅

Nuxt 3 공식 문서

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

 

Installation · Get Started with Nuxt

Get started with Nuxt quickly with our online starters or start locally with your terminal.

nuxt.com

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를 잡아주는 것을 확인할 수 있다.

저작자표시 (새창열림)

'[ Frontend ] > Vue.js & Nuxt.js' 카테고리의 다른 글

[Nuxt3] 사용자 정의 페이지 메타 함수 definePageMeta()  (0) 2025.03.11
[Nuxt3] Props 선언 및 사용  (0) 2025.03.10
[Vue.js] Vue cli로 Vue.js 프로젝트 생성하기  (0) 2024.08.12
[Vue.js] 기본 문법 알아보기 / Vue 인스턴스, 컴포넌트 / Vue 디렉티브  (0) 2024.08.12
[Nuxt / axios] axios 사용법 / require() of es module 에러 해결 방법  (0) 2024.08.01
  1. 0. node version
  2. 1. create nuxt
  3. 2. package manager 선택
  4. 3. package.json 수정 (nuxi)
  5. 4. 프로젝트 실행 npm run dev
  6. 5. nuxt init page
  7. 6. typescript 세팅
'[ Frontend ]/Vue.js & Nuxt.js' 카테고리의 다른 글
  • [Nuxt3] 사용자 정의 페이지 메타 함수 definePageMeta()
  • [Nuxt3] Props 선언 및 사용
  • [Vue.js] Vue cli로 Vue.js 프로젝트 생성하기
  • [Vue.js] 기본 문법 알아보기 / Vue 인스턴스, 컴포넌트 / Vue 디렉티브
HSRyuuu
HSRyuuu
Web Backend Developer happyhsryu
HSRyuuu
HS_dev_log
HSRyuuu
전체
오늘
어제
  • 전체 글 보기 (235)
    • Java (25)
    • Spring (29)
    • JPA & QueryDSL (13)
    • Database (17)
    • 자료구조 & 알고리즘 (30)
    • DevOps (10)
    • [ Computer Science ] (47)
      • Web & Network (14)
      • 프로그래밍 이론 (11)
      • 운영체제 (3)
      • 데이터베이스 이론 (5)
      • Linux 리눅스 (7)
    • [ Frontend ] (17)
      • Vue.js & Nuxt.js (9)
      • JSP_Thymeleaf (7)
    • [ 기타 ] (47)
      • 오픈소스 라이브러리 (5)
      • 코딩테스트 (13)
      • Trouble Shooting (7)
      • Tech Interview (6)
      • Book Review (9)
      • 끄적끄적... (5)
      • 개인 프로젝트 (2)

블로그 메뉴

  • 홈
  • 태그
  • github

공지사항

  • GitHub
  • 공부한 내용을 정리하고 기록하는 블로그 입니다.

인기 글

태그

  • HTTP
  • 기술면접
  • 클린코드
  • cleancode
  • 백엔드
  • Spring
  • 백엔드스쿨
  • springsecurity
  • web
  • 백준
  • Java
  • Linux
  • JPA
  • 백엔드공부
  • SpringBoot
  • Redisson
  • 자료구조
  • mybatis
  • 리눅스
  • Redis
  • TechInterview
  • vue3
  • MySQL
  • Database
  • 백엔드기술면접
  • 개발자
  • 트랜잭션
  • Nuxt3
  • SQL
  • 제로베이스

최근 댓글

최근 글

hELLO · Designed By 정상우.
HSRyuuu
[Nuxt3] 개발환경 구성 Get started
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.