Nuxt Content lê o diretório content/ no seu projeto e analisa arquivos .md, .yml, .csv e .json para criar um CMS baseado em arquivos para sua aplicação.

• Renderize seu conteúdo com componentes embutidos.
• Consulte seu conteúdo com uma API semelhante ao MongoDB.
• Use seus componentes Vue em arquivos Markdown com a sintaxe MDC.
• Gere automaticamente sua navegação.

Habilitar Nuxt Content

Instale o módulo @nuxt/content no seu projeto e adicione-o ao seu nuxt.config.ts com um único comando:

npx nuxt module add content

Criar Conteúdo

Coloque seus arquivos markdown dentro do diretório content/:

# Olá Conteúdo

O módulo os carrega e analisa automaticamente.

Renderizar Conteúdo

Para renderizar páginas de conteúdo, adicione uma rota catch-all usando o 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>

Documentação