definePageMeta는 pages/ 디렉토리에 있는 페이지 컴포넌트에 대한 메타데이터를 설정하는 컴파일러 매크로 함수입니다.
<script setup lang="ts">
definePageMeta({
title: 'My home page'
})
</script>위와 같이 메타 데이터를 설정할 수 있는데, 어떤 설정들이 가능한지 더 알아보겠습니다.
definePageMeta에서 설정 가능한 것들
title
페이지의 title 태그를 설정합니다. 브라우저 탭에 표시되며, 검색 엔진 최적화(SEO)에 중요한 역할을 합니다.
meta
페이지에 포함될 메타 태그를 설정하는데 사용됩니다. 주로 SEO와 소셜 미디어 미리보기를 위해 meta 태그를 설정합니다.
layout
해당 페이지에서 사용할 레이아웃을 지정합니다. 레이아웃은 Nuxt.js의 layouts/ 폴더에 정의된 파일을 기반으로 합니다.
export default definePageMeta({
layout: 'custom-layout' // 'layouts/custom-layout.vue' 파일 사용
})keepalive
페이지 컴포넌트를 캐싱하여 페이지 전환 시 컴포넌트 상태를 유지할 수 있게 합니다. 이는 Vue의 keep-alive 기능과 동일합니다.
Vue의 keep-alive 알아보기
key
Vue.js에서 key는 컴포넌트의 고유성을 결정하는 데 사용됩니다. 페이지를 재사용할지, 새로 렌더링할지를 결정할 때 사용됩니다.
middleware
페이지에 접근하기 전에 실행할 미들웨어를 설정합니다. 미들웨어는 인증, 권한 검증, 리다이렉션 등의 로직을 처리하는 데 사용됩니다.
head
Nuxt 3에서는 head 옵션을 definePageMeta에서 직접 설정할 수 있습니다. 이 옵션은 SEO 및 웹페이지의 외부 리소스(예: 폰트, 스타일시트)를 head에 추가하는 데 사용됩니다.
중첩된 경로의 definePageMeta
Nuxt.js에서 중첩 경로를 사용하는 경우, 각 페이지 또는 경로에서 definePageMeta를 사용하여 메타데이터를 정의할 수 있습니다. 이때, 메타데이터는 중첩된 모든 경로에서 상위 컴포넌트의 메타데이터와 병합됩니다. 그러나, 동일한 속성(key)을 다르게 정의해두면 하위 경로의 메타데이터가 상위 경로의 메타데이터를 덮어씁니다.
