Nuxt 4 출시

nuxt-create-app 으로 새 프로젝트를 생성하는데, 4.0.3이 설치가 됐다.

`npm run dev` 로 첫화면 띄워 보고서야 알았다.

 

nuxt 4 부터는 디렉토리 구조가 변경됐다.

components, composables, pages, layouts, middleware, plugins, utils 등등이 app/ 하위 디렉토리로 이동되었다.

감사하게도 자동 마이그레이션 도구를 제공하긴 한다.

 

$ npx nuxt upgrade
# 또는
$ npm install nuxt@^4.0.0

# 이 구문을 실행하면 몇가지 질문과 함께 디렉토리들을 app/ 내부로 자동 이동 시켜준다.
$ npx codemod@latest nuxt/4/migration-recipe

 

pinia를 사용중이라면 nuxt 4에 맞는 버전으로 업데이트 해줘야 한다.

 

$ npm update @pinia/nuxt

# 위 커맨드로 안된다면

$ npm install @pinia/nuxt@latest

 

또한, 기존에 @/ 또는 ~/ 별칭으로 import 해놓은 코드들이 경로 오류가 날 수 있다.

반드시 npm run build (generate)를 실행해보자.

 

오류가 나는 이유는 @(~) 경로가 프로젝트 루트에서 app/ 경로로 변경되었기 때문이다.

프로젝트 루트에 있는 파일(types.d.ts 같은)들이나, 루트에 남겨둬야 하는 디렉토리를 불러올때는 @@ 또는 ~~을 사용하자.

 

ex) import {MyType} from '~/types'; -> import {MyType} from '~~/types';

 

대충 이정도 해 주면 금방 다시 작동되는 것을 볼 수 있다.