플러그인과 미들웨어

플러그인

플러그인은 이제 다른 형식을 가지며, 하나의 인자(nuxtApp)만 받습니다.

export default (ctx, inject) => {
  inject('injected', () => 'my injected function')
}

export default defineNuxtPlugin((nuxtApp) => {
  // 이제 `nuxtApp.$injected`에서 사용할 수 있습니다
  nuxtApp.provide('injected', () => 'my injected function')

  // 자동 타입 지원이 포함된 다음 형식을 대신 사용할 수도 있습니다
  return {
    provide: {
      injected: () => 'my injected function',
    },
  }
})

마이그레이션

1. 플러그인을 defineNuxtPlugin 헬퍼 함수를 사용하도록 마이그레이션하세요.
2. app/plugins/ 폴더에 있는 항목은 nuxt.config의 plugins 배열에서 제거하세요. 이 디렉터리의 최상위에 있는 모든 파일(그리고 하위 디렉터리의 모든 index 파일)은 자동으로 등록됩니다. mode를 client 또는 server로 설정하는 대신, 파일 이름에 이를 표시할 수 있습니다. 예를 들어, ~/plugins/my-plugin.client.ts는 클라이언트 측에서만 로드됩니다.

라우트 미들웨어

라우트 미들웨어는 다른 형식을 가집니다.

export default function ({ store, redirect }) {
  // 사용자가 인증되지 않은 경우
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useState('auth')
  if (!auth.value.authenticated) {
    return navigateTo('/login')
  }
})

Nuxt 2와 마찬가지로, ~/middleware 폴더에 위치한 라우트 미들웨어는 자동으로 등록됩니다. 그런 다음 컴포넌트에서 이름으로 지정할 수 있습니다. 그러나 이는 컴포넌트 옵션이 아니라 definePageMeta로 수행됩니다.

navigateTo는 여러 라우트 헬퍼 함수 중 하나입니다.

마이그레이션

1. 라우트 미들웨어를 defineNuxtRouteMiddleware 헬퍼 함수를 사용하도록 마이그레이션하세요.
2. (nuxt.config에 있는 것과 같은) 모든 전역 미들웨어는 .global 확장자를 사용하여 ~/middleware 폴더에 배치할 수 있습니다. 예를 들어 ~/middleware/auth.global.ts와 같습니다.