Using mdx in Nuxt 3 for static data

Question

I'm trying to use mdx in my nuxt 3 app. But I can't seem to get it to work.
I have this example card from vuetify:

And I want to control the example data with a mdx file, like so: It is in the content/roadtrip.mdx folder

---
title: "Top western road trips"
subtitle: "1,000 miles of wonder"
image: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
---

I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way to escape.

I added the module @nuxt/content

I tried this:

<template>
  <div>
    <div v-for="post in posts" :key="post._path">
      <v-card class="mx-auto" max-width="344">
        <v-img :src="post.image" height="200px" cover></v-img>
        <v-card-title>{{ post.title }}</v-card-title>
        <v-card-subtitle>{{ post.subtitle }}</v-card-subtitle>
        <v-card-actions>
          <v-btn text>Demo</v-btn>
          <v-spacer></v-spacer>
          <v-btn :icon="show === post._path ? 'mdi-chevron-up' : 'mdi-chevron-down'" @click="toggle(post._path)"></v-btn>
        </v-card-actions>
        <v-expand-transition>
          <div v-show="show === post._path">
            <v-divider></v-divider>
            <v-card-text v-html="post.body"></v-card-text>
          </div>
        </v-expand-transition>
      </v-card>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  async asyncData({ $content }) {
    const posts = await $content('posts').fetch()
    return { posts }
  },
  setup() {
    const show = ref(null)
    const toggle = (path) => {
      show.value = show.value === path ? null : path
    }
    return { show, toggle }
  }
}
</script>

I expected the data, but there was nothing.

Answer 1

OP used $fetch with JSON rather than MDX and achieved to make it work.