Einführung

Schöne Typografie-Komponenten und Dienstprogramme, um Ihre Inhalte mit Nuxt UI zu gestalten.

Nuxt UI bietet schön gestaltete Prose components für Ihre markdown content. Whether you rendering markdown with a library or use prose components directly, Nuxt UI applies its design system so your content automatically adapts to your application's theme. Ob Sie Markdown mit einer Bibliothek rendern oder Prosa-Komponenten direkt verwenden, Nuxt UI wendet sein Designsystem an, so dass sich Ihre Inhalte automatisch an das Thema Ihrer Anwendung anpassen.

Prosa-Komponenten werden automatisch aktiviert, wenn Sie @nuxtjs/mdc, xph03x oder @comark/nuxt.

Andernfalls aktivieren Sie die Option xph05xxxxxxxxx00018xxxxxxx000000xxxxxxx0000xxxx00000
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    prose: true
  }
})
Für die Installation und Einrichtung von Nuxt Content lesen Sie die Anleitung Content integration.
Um Prosa-Komponenten mit Vue zu verwenden, müssen Sie die Option prose in Ihrem vite.config.ts aktivieren:
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
    })
  ]
})

Verwendung

Es gibt mehrere Möglichkeiten, gestylten Inhalt zu rendern:

  1. Markdown-Rendering: Verwenden Sie ContentRenderer, MDC, Markdown oder MarkdownDocument, um Markdown mit automatischer Prosa-Formatierung zu rendern
  2. Direct Vue usage: Importieren und verwenden Sie Prosa-Komponenten direkt in Ihren Vue-Vorlagen

Es gibt mehrere Möglichkeiten, gestylten Inhalt zu rendern:

  1. Markdown-Rendering: Markdown oder MarkdownDocument verwenden, um Markdown mit automatischem Prosa-Styling zu rendern
  2. Direct Vue usage: Importieren und verwenden Sie Prosa-Komponenten direkt in Ihren Vue-Vorlagen

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

Wenn Sie @nuxt/content verwenden, rendern Sie Ihre Sammlungsseiten mit der Komponente [<ContentRenderer>xph0777xhttps://content.nuxt.com/docs/components/content-renderer):

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>

Mit MDC-Komponente: badge{label="Nuxt only" color="warning" class="align-text-top"}

Wenn Sie @nuxtjs/mdc oder @nuxt/content verwenden, verwenden Sie die <MDC>-Komponente, um Markdown-Zeichenfolgen zu rendern:

<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 favour of Comark. Your existing markdown files are compatible, no content changes needed. [Comarkxph1222xhttps://comark.dev). Your existing markdown files are compatible, no content changes needed. @nuxtjs/mdc is being deprecated in favour of [Comarkxxxx1222xxxxxxxxxxxxxxxxph122222xxph12xxph12xxph12xxph12xxph12xx12xhttps://comark.devx123x).

With Markdown-Komponente

Comark rendert Markdown mit integrierter Unterstützung für Streaming. It inkrementell rendert Token, wie sie ankommen, so dass es ideal für AI-Chat-Antworten und andere dynamische Markdown-Inhalte.

<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>
Das shiki-Plugin fügt Syntax-Hervorhebung zu Codeblöcken hinzu. Verwenden Sie die :streaming-Prop, wenn Sie Inhalte rendern, die inkrementell ankommen, z. B. KI-Antworten.Um den dunklen Modus zu unterstützen, fügen Sie Ihrem Stylesheet das folgende CSS hinzu:
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;
}
In der Komponente Chat finden Sie ein vollständiges Beispiel für die Verwendung von Comark zum Rendern von KI-Chatnachrichten.

Mit MarkdownDocument

Verwenden Sie die <MarkdownDocument>-Komponente, um ein voranalysiertes MarkdownDocument zu rendern, ohne Parser-oder Plugin-Code an den Browser zu senden.

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

Mit Prose-Komponenten

Verwenden Sie Prosa-Komponenten direkt in Vue-Vorlagen für maximale Kontrolle.

<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 (englisch)

Markdown-Elemente werden automatisch Prosa-Komponenten zugeordnet: # Heading wird zu <ProseH1>, **bold** wird zu <ProseStrong>, `code` wird zu <ProseCode> usw.

MDC Syntaxxx geht noch weiter, indem Sie Vue-Komponenten direkt in markdown. It verwenden können wird von Nuxt Content, Nuxt MDC und Comark unterstützt.

Regulärer Markdown mit bold und * kursiv * Text.

Nutzen Sie MDC-Komponenten für reichhaltige Interaktionen!

Verwenden Sie pnpm add @ nuxt/ui, um die

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 hinzufügen
```

```bash [yarn]
add @ nuxt/ui hinzufügen
```

```bash [npm]
npm install @ nuxt/ui (nicht verfügbar)
```

```bash [bun]
bun add @ nuxt/ui hinzufügen
```

::

Theme Bearbeiten

Überschreiben Sie alle Prosa-Komponenten-Stylings in Ihrer App-Konfiguration:

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.