Content

Instalação

Para começar, você pode seguir o guia oficial ou, em resumo:

pnpm add @nuxt/content

yarn add @nuxt/content

npm install @nuxt/content

bun add @nuxt/content

Depois, adicione o módulo @nuxt/content no seu nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nitro/ui',
    '@nuxt/content'
  ],
  css: ['~/assets/css/main.css']
})

Configuração

Ao usar classes do Tailwind CSS nos seus arquivos de conteúdo markdown, você precisa garantir que o Tailwind consiga detectar e gerar as classes utilitárias necessárias. Por padrão, a detecção automática de conteúdo do Tailwind pode não captar as classes escritas em arquivos markdown.

Para corrigir isso, use a diretiva @source no seu arquivo CSS para incluir explicitamente o diretório de conteúdo:

@import "tailwindcss";
@import "@nitro/ui";

@source "../../../content/**/*";

Isso garante que:

• Tailwind scans all markdown files in your content directory
• Any utility classes used in your markdown (like text-primary) are included in the final CSS
• Dynamic classes in MDC components or custom Vue components within your content work properly

Componentes

Você pode estar usando o @nuxt/content para construir uma documentação. Para ajudar você com isso, criamos alguns componentes que você pode usar nas suas páginas:

• a built-in full-text search command palette with ContentSearch, replacing the need for Algolia DocSearch
• a navigation tree with the ContentNavigation component
• a sticky Table of Contents with the ContentToc component
• a prev / next navigation with the ContentSurround component

Typography

O Nitro UI fornece suas próprias implementações personalizadas de todos os componentes de prose para uma integração perfeita com o @nuxt/content. Essa abordagem garante estilização consistente, controle total sobre a tipografia e alinhamento perfeito com o design system do Nitro UI, para que seu conteúdo sempre pareça coeso desde o início.

Utilitários

mapContentNavigation

Este utilitário mapeará a navegação de queryCollectionNavigation e a transformará recursivamente em um array de objetos que pode ser usado por vários componentes.

mapContentNavigation(navigation, options?)

• navigation: The navigation tree (array of ContentNavigationItem).
• options (optional):
  • labelAttribute: (string) Which field to use as label (title by default)
  • deep: (number or undefined) Controls how many levels of navigation are included (undefined by default : includes all levels)

Example: As shown in the breadcrumb example below, it's commonly used to transform the navigation data into the correct format.

<script setup lang="ts">
import { mapContentNavigation } from '@nitro/ui/utils/content'
import { findPageBreadcrumb } from '@nuxt/content/utils'

const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))

const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value?.path, { indexAsChild: true })).map(({ icon, ...link }) => link), { deep: 0 })
</script>

<template>
  <NPage>
    <NPageHeader v-bind="page">
      <template #headline>
        <NBreadcrumb :items="breadcrumb" />
      </template>
    </NPageHeader>
  </NPage>
</template>