Setup Nuxt v3 with Content v2 (Markdown pages)

If you have yet to create a nuxt project (it will install the necessary package with configuration)

npx nuxi init [name] -t contentcd [name]npm install

Else, you would do it manually

npm install --save-dev @nuxt/content

Edit nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-configexport default defineNuxtConfig({  modules: [    '@nuxt/content'  ],  content: {    // https://content.nuxtjs.org/api/configuration    highlight: {      theme: 'github-light',      preload: ['python', 'kotlin', 'java', 'javascript', 'json', 'bash']    }  }})

Edit app.vue

<template>  <NuxtLayout>    <NuxtPage />  </NuxtLayout></template>

Create Markdown Content

Create content/about.md

# About UsTell me a story

Create content/post/hello.md

---title: 'Hello'description: ''date: 2022-01-01---## WhyWhay am I writing this

Create content/post/hello-again.md

---title: 'Hello Again'description: ''date: 2022-01-02---Why are you here again?

Create Pages

Create pages/index.vue

<script setup>const query = {   path: '/posts',   only: ['title', 'description', 'date'],  sort: { date: -1} }</script><template>  <div>    <h1>Navigate</h1>    <NuxtLink to="/about">About</NuxtLink>    <h1>Posts</h1>    <ContentList :query="query" >      <template v-slot="{ list }">        <div v-for="article in list" :key="article._path">          <h3><NuxtLink :to="article._path">{{ article.title }}</NuxtLink></h3>          <p>[{{ new Date(article.date) }}] {{ article.description }}</p>        </div>      </template>      <template #not-found>        <p>No post found.</p>      </template>    </ContentList>  </div></div>

Create pages/[...slug].vue

<template>  <main>    <ContentDoc />  </main></template>

NOTE: Refer to my github repo for a more complete example

References: