페이지 구성 요소에 대한 메타데이터를 정의합니다.

definePageMeta

definePageMeta()는 pages/ 디렉토리에 있는 페이지 컴포넌트에 대한 메타데이터를 설정하는 데 사용할 수 있는 컴파일러 매크로 함수입니다. 이 방법으로 Nuxt 애플리케이션의 각 정적 또는 동적 경로에 대한 사용자 정의 메타데이터를 설정할 수 있습니다.

definePageMeta · Nuxt Utils

사용자 정의 메타데이터 설정

애플리케이션의 경로(route)에 대한 메타데이터를 정의할 수 있습니다. <script>와 <script setup> 모두에서 작동하는 definePageMeta() 매크로 함수를 사용하여 이 작업을 수행할 수 있습니다.

<script setup lang="ts">
definePageMeta({
  title: 'My home page'
})
</script>

위와 같이 설정한 다음 route.meta 개체를 통해 접근할 수 있습니다.

<template>
	{{ $route.meta.title }}  <!-- My home page -->
</template>
<script setup lang="ts">
const route = useRoute()

console.log(route.meta.title) // My home page
</script>

중첩된 경로(nested routes)를 사용하는 경우 이러한 모든 경로의 페이지 메타데이터가 단일 객체로 병합됩니다. 경로 메타에 대한 자세한 내용은 vue-router docs를 참조하세요.

defineEmits 또는 defineProps(Vue 문서 참조)와 매우 유사하게, definePageMeta는 컴파일러 매크로함수입니다. 이것은 컴포넌트 내에서 참조할 수 없도록 컴파일됩니다. 대신 전달된 메타데이터가 컴포넌트 밖으로 끌어올려집니다. 따라서 페이지 메타 객체는 컴포넌트(또는 컴포넌트에 정의된 값)를 참조할 수 없습니다. 그러나 가져온 바인딩을 참조할 수 있습니다.

<script setup lang="ts">
import { someData } from '~/utils/example'

const title = ref('')

definePageMeta({
  title,  // 이렇게 하면 오류가 발생합니다. (컴포넌트 내 데이터 참조할 수 없음. 이유는 definePageMeta는 컴파일 될 때 컴포넌트 밖으로 끌어올려지기(hoisted) 때문
  someData
})
</script>

사용자 정의 메타데이터 타입 정의

페이지에 사용자 정의 메타데이터를 추가하는 경우 타입이 안전한 방식으로 수행하는 것이 좋습니다. definePageMeta가 허용하는 객체의 타입을 확장하는 것이 가능합니다.

declare module '#app' {
  interface PageMeta {
    pageType?: string
  }
}

// 유형을 확장할 때 무언가를 가져오거나 내보내는 것이 항상 중요합니다.
export {}

특수 메타데이터