How to Access markdown front matter properties from Nuxt 3 script

Question

Let's say, I have built a document driven Nuxt Content project. There is a markdown content file /content/about.md with the following content:

---
title: About Me
status: complete
layout: page
---
## This is a heading

In /layouts/page.vue file, I have the following code to render the content:

<template>
 <div>
  <h1>{{ page.status }}</h1> <!-- it works -->
  <slot />
 </div>
</template>

<script setup>
const { page } = useContent();

console.log(page.status); // but this doesn't work, shows 'page' as "undefined"
</script>

As mentioned in the code, I can't access the frontmatter property status from the script setup section but it's accessible inside the template <h1>{{ page.status }}</h1>.

How can I access this? What am I doing wrong? Thanks.

Answer 1

I think you should add .value to the page.

<script setup lang="ts">
const { page } = useContent()
console.log(page.value.status)
</script>