개요

Nuxt 3와의 차이를 줄이고 Nuxt 3로의 마이그레이션 부담을 줄입니다.
새로운 Nuxt 3 프로젝트를 시작하는 경우, 이 섹션은 건너뛰고 Nuxt 3 설치로 이동하세요.
Nuxt Bridge는 Nuxt 3와 동일한 기능을 제공합니다(문서)만, 몇 가지 제한 사항이 있습니다. 특히 useAsyncData와 useFetch 컴포저블은 사용할 수 없습니다. 자세한 내용은 이 페이지의 나머지 부분을 읽어주세요.

Bridge는 Nuxt 모듈을 설치하고 활성화하는 것만으로도 많은 새로운 Nuxt 3 기능을 경험할 수 있게 해주는 순방향 호환성 레이어입니다.

Nuxt Bridge를 사용하면 프로젝트가 Nuxt 3를 위한 (거의) 준비가 되었는지 확인할 수 있고, Nuxt 3로의 전환을 점진적으로 진행할 수 있습니다.

첫 번째 단계

Nuxt 2 업그레이드

개발 서버(nuxt dev)가 실행 중이 아닌지 확인하고, 패키지 락 파일(package-lock.json 및 yarn.lock)을 제거한 뒤, 최신 Nuxt 2 버전을 설치하세요:

package.json
- "nuxt": "^2.16.3"
+ "nuxt": "^2.17.3"

그런 다음, 의존성을 다시 설치합니다:

npm install
설치가 완료되면, 진행하기 전에 개발 및 프로덕션 빌드가 모두 예상대로 동작하는지 확인하세요.

Nuxt Bridge 설치

@nuxt/bridge와 nuxi를 개발 의존성으로 설치합니다:

npm install -D @nuxt/bridge nuxi

nuxt.config 업데이트

설정 파일에서 module.exports, require, require.resolve와 같은 CommonJS 문법을 사용하지 않도록 해주세요. 이는 곧 사용 중단(deprecated) 및 미지원 상태가 됩니다.

대신 정적 import, 동적 import() 및 export default를 사용할 수 있습니다. 파일 이름을 nuxt.config.ts로 변경하여 TypeScript를 사용하는 것도 가능하며 권장됩니다.

nuxt.config.ts
import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: false,
})

명령어 업데이트

이제 nuxt 명령은 nuxt2 명령으로 변경해야 합니다.

{
  "scripts": {
-   "dev": "nuxt",
+   "dev": "nuxt2",
-   "build": "nuxt build",
+   "build": "nuxt2 build",
-   "start": "nuxt start",
+   "start": "nuxt2 start"
  }
}

여기에서 한 번 nuxt2를 실행해 보세요. 애플리케이션이 이전과 동일하게 동작하는 것을 확인할 수 있습니다.

('bridge'가 false로 설정되어 있으면, 애플리케이션은 이전과 아무런 변경 없이 동작합니다.)

업그레이드 단계

Nuxt Bridge를 사용하면 Nuxt 3로의 마이그레이션을 단계적으로 진행할 수 있습니다. 아래의 업그레이드 단계는 한 번에 모두 수행할 필요는 없습니다.

CommonJS에서 ESM으로 마이그레이션

Nuxt 3는 TypeScript와 ECMAScript 모듈을 네이티브로 지원합니다. 자세한 정보와 업그레이드 방법은 네이티브 ES 모듈을 확인하세요.