레거시 Composition API

Nuxt Bridge는 Composition API 문법에 대한 접근을 제공합니다. 이는 Nuxt 3와의 정렬을 목표로 특별히 설계되었습니다. 이 때문에, 이전에 Composition API를 사용하고 있었다면 Nuxt Bridge를 활성화할 때 몇 가지 추가 단계가 필요합니다.

모듈 제거

• 의존성에서 @vue/composition-api를 제거합니다.
• 의존성에서 @nuxtjs/composition-api를 제거합니다 (nuxt.config의 modules에서도 제거).

@vue/composition-api 사용하기

@nuxtjs/composition-api가 아닌 @vue/composition-api만 사용하고 있었다면, 작업은 매우 간단합니다.

1. 먼저, Composition API를 수동으로 등록하고 있는 플러그인을 제거합니다. Nuxt Bridge가 이를 대신 처리합니다.

- import Vue from 'vue'
- import VueCompositionApi from '@vue/composition-api'
-
- Vue.use(VueCompositionApi)

2. 그 외에는 별도로 할 일이 없습니다. 다만, 원한다면 @vue/composition-api에서의 명시적 import를 제거하고 Nuxt Bridge가 자동으로 import해 주는 것에 의존할 수 있습니다.

@nuxtjs/composition-api에서 마이그레이션하기

Nuxt Bridge는 @nuxtjs/composition-api와는 약간 다르게 Composition API를 구현하며, Nuxt 3가 제공하는 composable과의 정렬을 목표로 하는 다른 composable들을 제공합니다.

일부 composable이 제거되었고 아직 대체제가 없는 것들도 있기 때문에, 이 과정은 조금 더 복잡할 수 있습니다.

buildModules에서 @nuxtjs/composition-api/module 제거

import를 즉시 모두 업데이트할 필요는 없습니다. Nuxt Bridge는 현재 사용 중인 대부분의 import에 대해 자동으로 'shim'을 제공하여, 아래 예외 사항들을 제외하고는 Nuxt 3 호환 composable로 마이그레이션할 시간을 제공합니다.

• withContext는 제거되었습니다. 아래를 참고하세요.
• useStatic은 제거되었습니다. 현재 대체제가 없습니다. 이에 대한 사용 사례가 있다면 논의를 제안해 주세요.
• 사용 중단(deprecated) 상태였던 reqRef와 reqSsrRef는 완전히 제거되었습니다. 이를 대체하기 위해 아래 ssrRef에 대한 안내를 따르세요.

bridge.capi 설정

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    capi: true,
    nitro: false, // Nitro로의 마이그레이션이 완료되었다면 true로 설정
  },
})

@nuxtjs/composition-api에서 사용 중인 다른 각 composable에 대해 아래 단계를 따르세요.

useFetch

$fetchState와 $fetch는 제거되었습니다.

const {
- $fetch,
- $fetchState,
+ fetch,
+ fetchState,
} = useFetch(() => { posts.value = await $fetch('/api/posts') })

defineNuxtMiddleware

이는 이제 제거된 타입 헬퍼 스텁 함수였습니다.

defineNuxtMiddleware 래퍼를 제거하세요:

- import { defineNuxtMiddleware } from '@nuxtjs/composition-api`
- export default defineNuxtMiddleware((ctx) => {})
+ export default (ctx) => {}

TypeScript 지원을 위해 @nuxt/types를 사용할 수 있습니다:

import type { Middleware } from '@nuxt/types'

export default <Middleware> function (ctx) { }

defineNuxtPlugin

이는 이제 제거된 타입 헬퍼 스텁 함수였습니다.

defineNuxtMiddleware와 마찬가지로, 함수 래퍼를 제거하여 Nuxt 2 스타일의 플러그인을 계속 사용할 수도 있습니다.

defineNuxtPlugin 래퍼를 제거하세요:

- import { defineNuxtPlugin } from '@nuxtjs/composition-api'
- export default defineNuxtPlugin((ctx, inject) => {})
+ export default (ctx, inject) => {}

TypeScript 지원을 위해 @nuxt/types를 사용할 수 있습니다:

import type { Plugin } from '@nuxt/types'

export default <Plugin> function (ctx, inject) {}

useRouter 및 useRoute

Nuxt Bridge는 useRouter 및 useRoute를 통해 이러한 composable에 대한 직접적인 대체제를 제공합니다.

유일한 핵심 차이점은 useRoute가 더 이상 computed 속성을 반환하지 않는다는 점입니다.

- import { useRouter, useRoute } from '@nuxtjs/composition-api'

  const router = useRouter()
  const route = useRoute()

- console.log(route.value.path)
+ console.log(route.path)