導入

Nuxt UIでコンテンツをスタイリングするための美しいタイポグラフィコンポーネントとユーティリティ。

Nuxt UIは、美しくスタイルされたProseコンポーネントをマークダウンコンテンツに提供します。ライブラリを使ってマークダウンをレンダリングする場合でも、散文コンポーネントを直接使用する場合でも、Nuxt UIはデザインシステムを適用し、コンテンツをアプリケーションのテーマに自動的に適応させます。

散文コンポーネントは、@nuxtjs/mdc@nuxt/contentまたは@comark/nuxt.

を使用すると自動的に有効になります。nuxt.config.tsで[prose](/docs/getting-started/installation/nuxt#prosexph02xオプションを有効にします。
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    prose: true
  }
})
Nuxt Contentのインストールとセットアップについては、Content integrationガイドを参照してください。
Vueで散文コンポーネントを使用するには、vite.config.tsでproseオプションを有効にする必要があります。
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
    })
  ]
})

使用法

スタイル付きコンテンツをレンダリングする方法は複数あります。

  1. Markdownレンダリング ContentRenderer、MDC、Markdown、MarkdownDocumentを使用して、自動散文スタイルでmarkdownをレンダリングする
  2. Direct Vue usage散文コンポーネントをVueテンプレートに直接インポートして使用する

スタイル付きコンテンツをレンダリングする方法は複数あります。

  1. Markdownレンダリング MarkdownまたはMarkdownDocumentを使用して自動散文スタイルでmarkdownをレンダリングする
  2. Direct Vue usage散文コンポーネントをVueテンプレートに直接インポートして使用する

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

@nuxt/contentを使用する場合、コレクションページを<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>

MDCコンポーネント付き：badge{label="Nuxt only" color="warning" class="align-text-top"}

@nuxtjs/mdcまたは@nuxt/contentを使用する場合は、<MDC>コンポーネントを使用してマークダウン文字列をレンダリングします。

<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は、Comarkを支持して非推奨となりました。既存のmarkdownファイルは互換性があり、内容を変更する必要はありません。

With Markdownコンポーネント

Comarkは、ストリーミングをサポートしたマークダウンをレンダリングします。トークンが到着すると徐々にレンダリングされるため、AIチャット応答やその他の動的なマークダウンコンテンツに最適です。

<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>
shikiプラグインは、コードブロックにシンタックスハイライトを追加します。AIレスポンスなど、インクリメンタルに到着するコンテンツをレンダリングする場合は、:streamingプロパティを使用します。ダークモードをサポートするには、以下のCSSをスタイルシートに追加します。
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;
}
Comarkを使用してAIチャットメッセージをレンダリングする完全な例については、Chatコンポーネントを参照してください。

With MarkdownDocument

<MarkdownDocument>コンポーネントを使用して、パーサーやプラグインコードをブラウザーに送らずに事前に解析されたMarkdownDocumentをレンダリングします。これは、サーバー上、ビルドステップ、または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>

散文コンポーネント付き

Vueテンプレートで直接散文コンポーネントを使用して最大限に制御します。

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

# Headingは<ProseH1>に、**bold**は<ProseStrong>に、`code`は<ProseCode>になります。

MDC Syntaxは、Markdownの中でVueコンポーネントを直接使用できるようにしています。Nuxt Content、Nuxt MDC、Comarkでサポートされています。

boldと * italic * テキストを使用した通常のマークダウン。

MDCコンポーネントを使用してリッチなインタラクション！

pnpm add @ nuxt/uiを使用してインストール

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]
yarn add @ nuxt/ui
```

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

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

::

Theme

アプリ設定の散文コンポーネントのスタイルを上書きします。

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.