Introdução

Belos componentes e utilitários de tipografia para estilizar o seu conteúdo com o Nitro UI.

O Nitro UI oferece componentes de prose lindamente estilizados para o seu conteúdo markdown. Seja renderizando markdown com uma biblioteca ou usando os componentes de prose diretamente, o Nitro UI aplica seu design system para que o seu conteúdo se adapte automaticamente ao tema da sua aplicação.

Os componentes de prose são habilitados automaticamente ao usar @nuxtjs/mdc, @nuxt/content ou @comark/nuxt.

Caso contrário, habilite a opção prose no seu nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nitro/ui'],
  ui: {
    prose: true
  }
})
Para a instalação e configuração do Nuxt Content, confira o guia de integração com Content.
Para usar os componentes de prose com Vue, você precisa habilitar a opção prose no seu vite.config.ts:
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      prose: true
    })
  ]
})

Uso

Há várias maneiras de renderizar conteúdo estilizado:

  1. Renderização de markdown - Use ContentRenderer, MDC, Comark ou ComarkRenderer para renderizar markdown com estilização de prose automática
  2. Uso direto no Vue - Importe e use os componentes de prose diretamente nos seus templates Vue

Há várias maneiras de renderizar conteúdo estilizado:

  1. Renderização de markdown - Use Comark ou ComarkRenderer para renderizar markdown com estilização de prose automática
  2. Uso direto no Vue - Importe e use os componentes de prose diretamente nos seus templates Vue

Com o ContentRenderer Nuxt only

Ao usar o @nuxt/content, renderize as páginas da sua coleção com o componente <ContentRenderer>:

pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
</script>

<template>
  <ContentRenderer :value="page" />
</template>

Com componente MDC Nuxt only

Ao usar o @nuxtjs/mdc ou o @nuxt/content, use o componente <MDC> para renderizar strings markdown:

<script setup lang="ts">
const value = `# Hello World

Learn more about the **MDC** component in the [documentation](https://github.com/nuxt-content/mdc).
`
</script>

<template>
  <MDC :value="value" />
</template>
@nuxtjs/mdc is being deprecated in favor of Comark. Your existing markdown files are compatible, no content changes needed.

Com o componente Comark

Comark renders markdown with built-in support for streaming. It incrementally renders tokens as they arrive, making it ideal for AI chat responses and any other dynamic markdown content.

<script setup lang="ts">
import highlight from '@comark/nuxt/plugins/highlight'

const markdown = ref('# Hello World\n\nThis is **streaming** markdown.')
</script>

<template>
  <Comark :markdown="markdown" :plugins="[highlight()]" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Comark } from '@comark/vue'
import highlight from '@comark/vue/plugins/highlight'

const markdown = ref('# Hello World\n\nThis is **streaming** markdown.')
</script>

<template>
  <Comark :markdown="markdown" :plugins="[highlight()]" />
</template>
O plugin highlight adiciona realce de sintaxe aos blocos de código. Use a prop :streaming ao renderizar conteúdo que chega de forma incremental, como respostas de IA.Para dar suporte ao modo escuro, adicione o seguinte CSS à sua folha de estilo:
main.css
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}
Veja o componente Chat para um exemplo completo de uso do Comark para renderizar mensagens de chat de IA.

Com o ComarkRenderer

Use o componente <ComarkRenderer> para renderizar um ComarkTree pré-processado sem enviar nenhum código de parser ou plugin ao navegador. Isso é útil quando o processamento acontece no servidor, em uma etapa de build ou via API.

<script setup lang="ts">
const { data: tree } = await useFetch('/api/content')
</script>

<template>
  <ComarkRenderer v-if="tree" :tree="tree" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ComarkRenderer } from '@comark/vue'

const tree = ref()

onMounted(async () => {
  tree.value = await fetch('/api/content').then(r => r.json())
})
</script>

<template>
  <ComarkRenderer v-if="tree" :tree="tree" />
</template>

Com componentes de prose

Use os componentes de prose diretamente nos templates Vue para máximo controle:

<template>
  <ProseTable>
    <ProseThead>
      <ProseTr>
        <ProseTh>Prop</ProseTh>
        <ProseTh>Default</ProseTh>
      </ProseTr>
    </ProseThead>
    <ProseTbody>
      <ProseTr>
        <ProseTd>
          <ProseCode>color</ProseCode>
        </ProseTd>
        <ProseTd>
          <ProseCode>neutral</ProseCode>
        </ProseTd>
      </ProseTr>
    </ProseTbody>
  </ProseTable>
</template>

MDC Syntax

Os elementos markdown são mapeados automaticamente para componentes de prose: # Heading vira <ProseH1>, **bold** vira <ProseStrong>, `code` vira <ProseCode>, e assim por diante.

MDC Syntax goes further by letting you use Vue components directly inside markdown. It is supported by Nuxt Content, Nuxt MDC and Comark.

Markdown comum com texto em negrito e itálico.

Use componentes MDC para interações ricas!

Use pnpm add @nitro/ui para instalar

pnpm add @nitro/ui

Regular markdown with **bold** and *italic* text.

::callout{icon="i-lucide-rocket" color="primary"}
Use MDC components for rich interactions!
::

::tabs

:::tabs-item{label="Installation"}
Use pnpm add @nitro/ui to install
:::

:::tabs-item{label="Usage"}
Import components and use them in your templates
:::

::

::code-group

```bash [pnpm]
pnpm add @nitro/ui
```

```bash [yarn]
yarn add @nitro/ui
```

```bash [npm]
npm install @nitro/ui
```

```bash [bun]
bun add @nitro/ui
```

::

Tema

Sobrescreva a estilização de qualquer componente de prose na configuração do seu app:

app/app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      h1: {
        slots: {
          base: 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl'
        }
      },
      p: {
        base: 'leading-7 [&:not(:first-child)]:mt-6'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          h1: {
            slots: {
              base: 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl'
            }
          },
          p: {
            base: 'leading-7 [&:not(:first-child)]:mt-6'
          }
        }
      }
    })
  ]
})

Cabeçalhos e texto

Títulos, parágrafos, formatação de texto e links lindamente estilizados para uma leitura ideal.