소개하기

아름다운 타이포그래피 구성 요소 및 유틸리티는 Nuxt UI를 사용하여 콘텐츠를 스타일화합니다.

Nuxt UI는 마크업 컨텐츠에 대해 스타일이 잘 지정된 Prose components를 제공합니다. 라이브러리를 사용하여 마크업을 렌더링하든 산문 구성 요소를 직접 사용하든, Nuxt UI는 디자인 시스템을 적용하여 컨텐츠가 응용 프로그램의 테마에 맞게 자동으로 조정됩니다.

@nuxtjs/mdc, 또는 [](https://comark.dev/rendering/nuxt.

를 사용할 때 프록시 구성 요소가 자동으로 활성화됩니다. 그렇지 않으면 다음 옵션에서 활성화됩니다.
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
    })
  ]
})

Usage 사용법

스타일이 지정된 컨텐츠를 렌더링하는 방법은 다음과 같습니다.

  1. Markdown rendering: ContentRenderer, MDC, Markdown 또는 MarkdownDocument를 사용하여 자동 산문 스타일 지정을 사용하여 Markdown 렌더링
  2. Direct Vue usage: Vue 템플릿에서 직접 산문 구성요소를 가져오고 사용

스타일이 지정된 컨텐츠를 렌더링하는 방법은 다음과 같습니다.

  1. Markdown rendering: 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 파일은 호환되며 내용을 변경할 필요가 없습니다.

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 Prop을 사용합니다.다크 모드를 지원하려면 스타일시트에 다음 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>

With Prose 구성요소

최대 제어를 위해 Vue 템플릿에서 직접 산문 구성 요소를 사용합니다.Use prose components directly in Vue templates for maximum control:

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

Markdown 요소는 자동으로 산문 구성 요소에 매핑됩니다 : # Heading는 <ProseH1>, **bold**는 <ProseStrong>, `code`는 <ProseCode>가 되는 방식입니다.

MDC Syntax는 Vue 컴포넌트를 markdown 내부에서 직접 사용할 수 있도록 하여 더 나아가 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 (yarn add@nuxt/ui) / (으)
```

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

```bash [bun]
bun add@nuxt/ui / bun add @nuxt/ui ( bun add @nuxt/ui ) 를 클릭하십시오 .
```

::

Theme (## 테마)

앱 구성에서 산문 구성 요소 스타일 지정을 재정의합니다.Override any prose component styling in your app configuration:

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.