Introductie

Mooie typografische componenten en hulpprogramma

Nuxt UI biedt prachtig vormgegeven Prose-componenten voor uw markdown-inhoud. Of u nu markdown weergeeft met een bibliotheek of prozacomponenten rechtstreeks gebruikt, Nuxt UI past het ontwerpsysteem toe, zodat uw inhoud zich automatisch aanpast aan het thema van uw applicatie.

Proza-componenten worden automatisch ingeschakeld bij gebruik van @nuxtjs/mdc, @nuxt/content of @comark/nuxt.

Otherwise, schakel de prose optie in uw nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    prose: true
  }
})
Raadpleeg de Content integration-handleiding voor installatie en installatie van Nuxt-inhoud.
Om proza-componenten met Vue te gebruiken, moet u de prose optie in uw vite.config.ts inschakelen:
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
    })
  ]
})

Gebruik

Er zijn meerdere manieren om gestileerde inhoud weer te geven:

  1. Markdown rendering: gebruik ContentRenderer, MDC, Markdown of MarkdownDocument om markdown weer te geven met automatische proza-styling
  2. Direct Vue usage: importeer en gebruik proza-componenten rechtstreeks in uw Vue-sjablonen

Er zijn meerdere manieren om gestileerde inhoud weer te geven:

  1. Markdown rendering: gebruik Markdown of MarkdownDocument om markdown weer te geven met automatische prozastyling
  2. Direct Vue usage: importeer en gebruik proza-componenten rechtstreeks in uw Vue-sjablonen

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

Geef bij het gebruik van @nuxt/content uw verzamelpagina 's weer met de <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>

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

Gebruik bij gebruik van @nuxtjs/mdc of @nuxt/content de <MDC> component om markdown-strings weer te geven:

<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 wordt afgeschaft ten gunste van Comark. Uw bestaande markdown-bestanden zijn compatibel, geen inhoudswijzigingen nodig.

Met Markdown component

Comark geeft markdown weer met ingebouwde ondersteuning voor streaming. Het geeft stapsgewijs tokens weer wanneer ze aankomen, waardoor het ideaal is voor AI-chatreacties en andere dynamische markdown-inhoud.

<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>
De shiki-plug-in voegt syntaxisaccentuering toe aan codeblokken. Gebruik de :streaming-prop bij het renderen van inhoud die stapsgewijs aankomt, zoals AI-reacties.Om de donkere modus te ondersteunen, voegt u de volgende CSS toe aan uw stylesheet:
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;
}
Zie de Chat-component voor een volledig voorbeeld van het gebruik van Comark om AI-chatberichten weer te geven.

Met MarkdownDocument

Gebruik de <MarkdownDocument> component om een vooraf geparseerde MarkdownDocument weer te geven zonder parser- of plug-incode naar de browser te sturen. Dit is handig wanneer het parseren plaatsvindt op de server, in een buildstap of via een 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>

Met Proza onderdelen

Gebruik prozacomponenten rechtstreeks in Vue-sjablonen voor maximale 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-syntaxis

Markdown elementen worden automatisch toegewezen aan proza-componenten: # Heading wordt <ProseH1>, **bold** wordt <ProseStrong>, `code` wordt <ProseCode>, enzovoort.

MDC Syntax gaat verder door u Vue-componenten direct in markdown te laten gebruiken. Het wordt ondersteund door Nuxt Content, Nuxt MDC en Comark.

Regelmatige markdown met bold en * cursieve * tekst.

Gebruik MDC-componenten voor rijke interacties!

Gebruik pnpm add @ nuxt / ui om te installeren

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 voeg @ nuxt / ui toe
```

```bash [yarn]
garen voeg @ nuxt / ui toe
```

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

```bash [bun]
knot voeg @ nuxt / ui toe
```

::

Thema

Overschrijd elke styling van prozacomponenten in uw app-configuratie:

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.