[Nuxt3] 1. 프로젝트 생성 및 설정

기존에 회사 프로젝트가 Vue3로 되어 있던걸 리뉴얼 하게 되었는데

SEO 문제 때문에 Nuxt3를 사용해 볼 예정이다

Nuxt3가 2022년 11월 16일 첫번째 정식버전이 출시되었다

 

국내에 nuxt3 강의가 많지 않아서 직접 공식문서를 보며 하나하나씩 진행해 볼 예정이다

 

기본적으로 node가 설치된 환경이라고 가정하고 node 설치에 대해서는 언급하지 않는다

 

공식 문서에 나와 있는 권장 설치 항목들은 nodejs 최신 LTS 버전과 vscode 그리고 vscode extension 인 volar(Vue Language Features) extension을 설치하라고 나와 있다. (node 는 현 시점으로 최신버전이 18 버전인데 아래와 같은 에러가 난다면 16버전의 LTS로 사용 해도 된다)

ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time

그리고 TypeScript Vue Plugin extension 대신에 Take Over Mode 를 권장 하고 있어 이 모드로 설정해서 사용해 볼 것이다

Take Over Mode 설정 방법은 아래 링크를 통해 확인 할 수 있다

https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode

Using Vue with TypeScript | Vue.js

이제 프로젝트를 생성해 보자

프로젝트 명은 공식문서에 나와 있는 그대로 nuxt-app이라고 생성하고 이 안에서 모든 기능들을 실행해 볼 예정이다

npx nuxi init nuxt-app

프로젝트를 생성할 폴더로 이동 한 후 위 명령어를 실행한다

프로젝트가 생성되면 vscode를 실행 후에 

yarn install
yarn dev -o

순서대로 위에 코드를 실행하면 정상적으로 페이지가 뜨는걸 확인 할 수 있다

패키지는 yarn을 써도 되고 npm을 써도 상관 없다

나는 yarn을 사용 했다

 

그럼 위에 volar extension을 설치 한 후에 Take Over Mode를 설정 해 준다

위에 문서대로 Take Over Mode를 설정 하면 vscode 우측 하단에 

라고 설정이 되어 있는걸 확인 할 수 있다.

그리고 Take Over Mode 또는 TypeScript Vue Plugin extension 을 설치하게 되면 shim 파일 생성을 비활성화 할 수 있다

nuxt.config.ts 파일에 설정을 추가해 보자

export default defineNuxtConfig({
  typescript: {
    shim: false
  }
})

위 처럼 설정하면 shim 파일을 생성을 비활성화 할 수 있다

공식 문서대로 나와 있는 설정은 이것으로 다 끝난 것 같다

 

다음으론 eslint + prettier 설정을 해보겠다