definePageMeta는 pages/ 디렉토리에 위치한 페이지 컴포넌트에 메타데이터를 설정할 수 있는 컴파일러 매크로입니다（다르게 설정되지 않은 경우）。이 방법을 통해 Nuxt 애플리케이션의 각 정적 또는 동적 경로에 대해 사용자 정의 메타데이터를 설정할 수 있습니다。

definePageMeta({
  layout: 'default'
})

Type

definePageMeta(meta: PageMeta) => void

interface PageMeta {
  validate?: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>
  redirect?: RouteRecordRedirectOption
  name?: string
  path?: string
  props?: RouteRecordRaw['props']
  alias?: string | string[]
  pageTransition?: boolean | TransitionProps
  layoutTransition?: boolean | TransitionProps
  viewTransition?: boolean | 'always'
  key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
  keepalive?: boolean | KeepAliveProps
  layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
  middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
  scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
  [key: string]: unknown
}

Parameters

meta

• Type: PageMeta

  다음 페이지 메타데이터를 수용하는 객체:

  name

  • Type: string

    이 페이지의 경로에 대한 이름을 정의할 수 있습니다. 기본적으로 이름은 pages/ 디렉토리 내의 경로를 기반으로 생성됩니다.

  path

  • Type: string

    파일 이름으로 표현할 수 있는 것보다 더 복잡한 패턴이 있는 경우 사용자 정의 정규 표현식을 정의할 수 있습니다.

  props

  • Type: RouteRecordRaw['props']

    페이지 컴포넌트에 전달된 props로 경로 params에 접근할 수 있게 합니다.

  alias

  • Type: string | string[]

    레코드에 대한 별칭입니다. 레코드의 복사본처럼 동작하는 추가 경로를 정의할 수 있습니다. /users/:id와 /u/:id와 같은 경로 단축을 허용합니다. 모든 alias와 path 값은 동일한 params를 공유해야 합니다.

  keepalive

  • Type: boolean | KeepAliveProps

    경로 변경 시 페이지 상태를 유지하려면 true로 설정하거나, 세밀한 제어를 위해 KeepAliveProps를 사용할 수 있습니다.

  key

  • Type: false | string | ((route: RouteLocationNormalizedLoaded) => string)

    <NuxtPage> 컴포넌트가 다시 렌더링될 때 더 많은 제어가 필요할 경우 key 값을 설정합니다.

  layout

  • Type: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>

    각 경로에 대한 레이아웃의 정적 또는 동적 이름을 설정합니다. 기본 레이아웃을 비활성화해야 하는 경우 false로 설정할 수 있습니다.

  layoutTransition

  • Type: boolean | TransitionProps

    현재 레이아웃에 적용할 전환의 이름을 설정합니다. 이 값을 false로 설정하여 레이아웃 전환을 비활성화할 수도 있습니다.

  middleware

  • Type: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>

    definePageMeta 내에서 익명 또는 명명된 미들웨어를 직접 정의합니다. 경로 미들웨어에 대해 자세히 알아보세요.

  pageTransition

  • Type: boolean | TransitionProps

    현재 페이지에 적용할 전환의 이름을 설정합니다. 이 값을 false로 설정하여 페이지 전환을 비활성화할 수도 있습니다.

  viewTransition

  • Type: boolean | 'always'

    실험적 기능, nuxt.config 파일에서 활성화된 경우에만 사용 가능
    현재 페이지에 대한 View Transitions를 활성화/비활성화합니다. true로 설정하면 사용자의 브라우저가 prefers-reduced-motion: reduce와 일치하는 경우 Nuxt는 전환을 적용하지 않습니다（권장）。always로 설정하면 Nuxt는 항상 전환을 적용합니다。

  redirect

  • Type: RouteRecordRedirectOption

    경로가 직접 일치할 경우 리디렉션할 위치입니다. 리디렉션은 모든 네비게이션 가드 전에 발생하며 새로운 대상 위치로 새로운 네비게이션을 트리거합니다.

  validate

  • Type: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>

    주어진 경로가 이 페이지로 유효하게 렌더링될 수 있는지 검증합니다. 유효하면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 다른 일치 항목을 찾을 수 없는 경우 404가 됩니다. statusCode/statusMessage를 포함한 객체를 직접 반환하여 즉시 오류로 응답할 수도 있습니다（다른 일치 항목은 확인되지 않습니다）。

  scrollToTop

  • Type: boolean | (to: RouteLocationNormalized, from: RouteLocationNormalized) => boolean

    Nuxt에게 페이지를 렌더링하기 전에 맨 위로 스크롤할지 여부를 알려줍니다. Nuxt의 기본 스크롤 동작을 덮어쓰려면 ~/app/router.options.ts에서 할 수 있습니다（사용자 정의 라우팅 참조）。

  [key: string]

  • Type: any

    위의 속성 외에도 사용자 정의 메타데이터를 설정할 수 있습니다. meta 객체의 타입을 확장하여 타입 안전한 방식으로 설정할 수 있습니다.

Examples

Basic Usage

아래 예제는 다음을 보여줍니다:

• key가 값을 반환하는 함수일 수 있는 방법;
• keepalive 속성이 여러 컴포넌트 간 전환 시 <modal> 컴포넌트가 캐시되지 않도록 보장하는 방법;
• pageType을 사용자 정의 속성으로 추가하는 방법:

definePageMeta({
  key: (route) => route.fullPath,

  keepalive: {
    exclude: ['modal']
  },

  pageType: 'Checkout'
})

Defining Middleware

아래 예제는 definePageMeta 내에서 function을 사용하여 미들웨어를 정의하거나 middleware/ 디렉토리에 있는 미들웨어 파일 이름과 일치하는 string으로 설정하는 방법을 보여줍니다:

definePageMeta({
  // define middleware as a function
  middleware: [
    function (to, from) {
      const auth = useState('auth')

      if (!auth.value.authenticated) {
          return navigateTo('/login')
      }

      if (to.path !== '/checkout') {
        return navigateTo('/checkout')
      }
    }
  ],

  // ... or a string
  middleware: 'auth'

  // ... or multiple strings
  middleware: ['auth', 'another-named-middleware']
})

Using a Custom Regular Expression

사용자 정의 정규 표현식은 겹치는 경로 간의 충돌을 해결하는 좋은 방법입니다. 예를 들어:

두 경로 "/test-category"와 "/1234-post"는 [postId]-[postSlug].vue와 [categorySlug].vue 페이지 경로 모두에 일치합니다.

[postId]-[postSlug] 경로에서 postId에 대해 숫자(\d+)만 일치하도록 하려면, [postId]-[postSlug].vue 페이지 템플릿에 다음을 추가할 수 있습니다:

definePageMeta({
  path: '/:postId(\\d+)-:postSlug' 
})

더 많은 예제는 Vue Router의 매칭 문법을 참조하세요.

Defining Layout

기본적으로 layouts/ 디렉토리에 있는 레이아웃의 파일 이름과 일치하는 레이아웃을 정의할 수 있습니다. 또한 layout을 false로 설정하여 레이아웃을 비활성화할 수 있습니다:

definePageMeta({
  // set custom layout
  layout: 'admin'

  // ... or disable a default layout
  layout: false
})