Introducción

Hermosos componentes de tipografía y utilidades para diseñar su contenido con Nuxt UI.

Nuxt UI proporciona componentes de prosa**Prose con un hermoso estilo para su contenido de markdown. Ya sea que renderice el markdown con una biblioteca o use componentes de prosa directamente, Nuxt UI aplica su sistema de diseño para que su contenido se adapte automáticamente al tema de su aplicación.

Los componentes de prosa se habilitan automáticamente cuando se usan @nuxtjs/mdc, @nuxt/content o [@comark/nuxtxph016https://comark.dev/rendering/nuxt).xph023
De lo contrario, habilite la opción [prose](/docs/getting-started/installation/nuxt#prosexph0xxph0222x en su xph0006x:
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    prose: true
  }
})
Para la instalación y configuración de Nuxt Content, consulte la guía de integración de **Content.
Para utilizar componentes de prosa con Vue, debe habilitar la opción prose en su vite.config.ts:
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

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

Utilización

Hay varias formas de renderizar contenido con estilo:

  1. Markdown rendering: utilice ContentRenderer, MDC, Markdown o MarkdownDocument para renderizar el Markdown con estilo de prosa automático
  2. Direct Vue usage: importa y usa componentes de prosa directamente en tus plantillas de Vue

Hay varias formas de renderizar contenido con estilo:

  1. Markdown rendering: use Markdown o MarkdownDocument para renderizar Markdown con estilo de prosa automático
  2. Direct Vue usage: importa y usa componentes de prosa directamente en tus plantillas de Vue

With ContentRenderer: badge{label="Nuxt only" color="warning" class="align-text-top"} (en inglés)

Al usar @nuxt/content, renderice las páginas de su colección con el 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>

Con el componente MDC: badge{label="Nuxt only" color="warning" class="align-text-top"}

Cuando se utiliza @nuxtjs/mdc o @nuxt/content, se utiliza el componente <MDC> para representar cadenas de marcado:

<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 está siendo desaprobado a favor de Comark. Sus archivos de descuento existentes son compatibles, no se necesitan cambios de contenido.

Con el componente Markdown

Comark representa la reducción de precios con soporte integrado para streaming. Representa los tokens de forma incremental a medida que llegan, lo que lo hace ideal para las respuestas de chat de IA y cualquier otro contenido dinámico de reducción de precios.

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

const plugins = [shiki()]

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

<template>
  <Markdown :value="markdown" :plugins="plugins" />
</template>

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

const plugins = [shiki()]

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

<template>
  <Markdown :value="markdown" :plugins="plugins" />
</template>
El plugin shiki agrega resaltado de sintaxis a los bloques de código. Use el prop :streaming al renderizar contenido que llega de forma incremental, como las respuestas de IA.Para admitir el modo oscuro, agregue el siguiente CSS a su hoja de estilos:
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;
}
Consulte el componente Chat para obtener un ejemplo completo del uso de Comark para renderizar mensajes de chat de IA.

With MarkdownDocument (Edición española)

Utilice el componente <MarkdownDocument> para renderizar un MarkdownDocument preanalizado sin enviar ningún código de analizador o complemento al navegador. Esto es útil cuando el análisis se realiza en el servidor, en un paso de compilación o a través de una API.

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

<template>
  <MarkdownDocument v-if="tree" :value="tree" />
</template>

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

const tree = ref()

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

<template>
  <MarkdownDocument v-if="tree" :value="tree" />
</template>

Con componentes de Prose

Utilice los componentes de prosa directamente en las plantillas de Vue para un control máximo:

<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 sintaxis

Los elementos de Markdown se asignan automáticamente a los componentes en prosa: # Heading se convierte en <ProseH1>, **bold** se convierte en <ProseStrong>, `code` se convierte en <ProseCode>, y así sucesivamente.

MDC Syntax va más allá al permitirle usar los componentes de Vue directamente dentro de la reducción de precios.

Descuento regular con bold y texto * itálico *.

¡ Utilice los componentes MDC para interacciones enriquecidas!

Utilice pnpm add @ nuxt/ui para instalar

pnpm add @nuxt/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 @nuxt/ui to install
:::

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

::

::code-group

```bash [pnpm]
pnpm add @ nuxt/ui (en inglés)
```

```bash [yarn]
iread add @ nuxt/ui (en inglés)
```

```bash [npm]
npm install @ nuxt/ui (en inglés)
```

```bash [bun]
bun add @ nuxt/ui (en español)
```

::

Temas

Anular cualquier estilo de componente de prosa en la configuración de la aplicación:

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 '@nuxt/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'
          }
        }
      }
    })
  ]
})

Headers and text

Beautifully styled headings, paragraphs, text formatting, and links for optimal readability.