Nuxt Content lee el directorio content/ en tu proyecto y analiza archivos .md, .yml, .csv y .json para crear un CMS basado en archivos para tu aplicación.

• Renderiza tu contenido con componentes integrados.
• Consulta tu contenido con una API similar a MongoDB.
• Usa tus componentes de Vue en archivos Markdown con la sintaxis MDC.
• Genera automáticamente tu navegación.

Habilitar Nuxt Content

Instala el módulo @nuxt/content en tu proyecto y agrégalo a tu nuxt.config.ts con un solo comando:

npx nuxt module add content

Crear Contenido

Coloca tus archivos markdown dentro del directorio content/:

# Hola Contenido

El módulo los carga y analiza automáticamente.

Renderizar Contenido

Para renderizar páginas de contenido, agrega una ruta catch-all usando el componente <ContentRenderer>:

<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})
</script>

<template>
  <div>
    <header><!-- ... --></header>

    <ContentRenderer v-if="page" :value="page" />

    <footer><!-- ... --></footer>
  </div>
</template>

Documentación