Introduction

De superbes composants typographiques et utilitaires pour styliser votre contenu avec l

Nuxt UI fournit des composants **Prose magnifiquement stylisés pour votre contenu de markdown. Que vous affichiez la markdown avec une bibliothèque ou que vous utilisiez directement des composants de prose, Nuxt UI applique son système de conception pour que votre contenu s'adapte automatiquement au thème de votre application.

Les composants Prose sont automatiquement activés lors de l'utilisation de @nuxtjs/mdc, @nuxt/content ou [@comark/nuxtxph016https://comark.dev/rendering/nuxt).

Sinon, activez l'option [prose](](ph0222x dans votre nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    prose: true
  }
})
Pour l'installation et la configuration de Nuxt Content, consultez le guide Content integration.
Pour utiliser des composants en prose avec Vue, vous devez activer l'option prose dans votre 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
    })
  ]
})

Utilisateur

Il existe plusieurs façons de rendre le contenu stylisé:

  1. **Markdown rendu **: utilisez ContentRenderer, MDC, Markdown ou MarkdownDocument pour rendre le marquage avec un style de prose automatique
  2. Direct Vue usage: importez et utilisez des composants en prose directement dans vos modèles Vue

Il existe plusieurs façons de rendre le contenu stylisé:

  1. **Markdown rendu **: utilisez Markdown ou MarkdownDocument pour rendre Markdown avec un style de prose automatique
  2. Direct Vue usage: importez et utilisez des composants de prose directement dans vos modèles Vue

Avec ContentRenderer: badge{label="Nuxt only" color="warning" class="align-text-top"}

Lorsque vous utilisez @nuxt/content, affichez les pages de votre collection avec le composant <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>

Avec le composant MDC: badge{label="Nuxt only" color="warning" class="align-text-top"}

Lorsque vous utilisez @nuxtjs/mdc ou @nuxt/content, utilisez le composant <MDC> pour rendre les chaînes de démarquage:

<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 obsolète en faveur de Comark. Vos fichiers de démarquage existants sont compatibles, aucun changement de contenu n'est nécessaire.

Avec Markdown composant

Comark rend la démarche avec prise en charge intégrée du streaming. Il rend les jetons de manière incrémentielle à mesure qu 'ils arrivent, ce qui le rend idéal pour les réponses de chat AI et tout autre contenu de démarche dynamique.

<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>
Le plugin shiki ajoute la surbrillance de la syntaxe aux blocs de code. Utilisez la prop :streaming lors du rendu du contenu qui arrive incrémentiellement, comme les réponses AI.Pour prendre en charge le mode sombre, ajoutez le CSS suivant à votre feuille de style:
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;
}
Voir le composant Chat pour un exemple complet d'utilisation de Comark pour rendre les messages de chat AI.

Avec MarkdownDocument

Utilisez le composant <MarkdownDocument> pour rendre un MarkdownDocument pré-analysé sans envoyer de code d'analyseur ou de plugin au navigateur. Ceci est utile lorsque l'analyse se produit sur le serveur, dans une étape de construction ou via une 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>

Avec composants Prose

Utilisez les composants de prose directement dans les modèles Vue pour un contrôle maximal:

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

Syntaxe ## MDC

Les éléments Markdown sont automatiquement mappés aux composants en prose: # Heading devient <ProseH1>, **bold** devient <ProseStrong>, `code` devient <ProseCode>, et ainsi de suite.

MDC Syntax va plus loin en vous permettant d'utiliser les composants Vue directement à l'intérieur du markdown. Il est supporté par Nuxt Content, Nuxt MDC et Comark.

Démarquage régulier avec bold et texte * italique *.

Utilisez les composants MDC pour des interactions riches!

Utilisez pnpm add @ nuxt/ui pour installer

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

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

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

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

::

Thème

Remplacer tout style de composant en prose dans la configuration de votre application:

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.