Plugins and Middleware

Nuxt 2에서 Nuxt Bridge의 새로운 플러그인과 미들웨어로 마이그레이션하는 방법을 알아보세요.

새로운 플러그인 형식

이제 Nuxt 3 플러그인 API로 마이그레이션할 수 있으며, 이는 Nuxt 2와 형식이 약간 다릅니다.

플러그인은 이제 하나의 인자(nuxtApp)만 받습니다. 자세한 내용은 문서에서 확인할 수 있습니다.

app/plugins/hello.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide('injected', () => 'my injected function')
  // 이제 `nuxtApp.$injected`에서 사용할 수 있습니다
})
새로운 Nuxt 컴포저블(예: useNuxtApp 또는 useRuntimeConfig)을 플러그인 내에서 사용하려면, 해당 플러그인에 defineNuxtPlugin 헬퍼를 사용해야 합니다.
비록 nuxtApp.vueApp을 통해 호환성 인터페이스가 제공되지만, 플러그인, 디렉티브, 믹스인 또는 컴포넌트를 이 방식으로 등록하는 것은 피해야 합니다. 한 번만 설치되도록 보장하는 자체 로직을 추가하지 않으면 메모리 누수가 발생할 수 있습니다.

새로운 미들웨어 형식

이제 Nuxt 3 미들웨어 API로 마이그레이션할 수 있으며, 이는 Nuxt 2와 형식이 약간 다릅니다.

미들웨어는 이제 두 개의 인자(to, from)만 받습니다. 자세한 내용은 문서에서 확인할 수 있습니다.

export default defineNuxtRouteMiddleware((to) => {
  if (to.path !== '/') {
    return navigateTo('/')
  }
})
defineNuxtRouteMiddleware의 사용은 app/middleware 디렉터리 밖에서는 지원되지 않습니다.

definePageMeta

Nuxt Bridge에서도 definePageMeta를 사용할 수 있습니다.

설정 파일에서 macros.pageMeta 옵션을 사용해 활성화할 수 있습니다.

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

export default defineNuxtConfig({
  bridge: {
    macros: {
      pageMeta: true,
    },
  },
})
단, middleware와 layout에만 사용할 수 있습니다.