标题和文本

精美设计的标题、段落、文本格式和链接，以实现最佳可读性。

标题

使用标题来组织您的内容，使其更易于阅读。

H1 到 H3 标题会自动生成锚点链接，并显示在目录中，方便导航。

您可以控制锚点链接的生成（例如，用于 AI 聊天界面），在您的 nuxt.config.ts 文件中。

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    renderer: {
      anchorLinks: false
    }
  }
})

您可以控制目录生成的行为，在您的 nuxt.config.ts 文件中。

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        toc: {
          depth: 3
        }
      }
    }
  }
})

标题 1

Nuxt UI

# Nuxt UI

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h1: {
        slots: {
          base: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
          link: 'inline-flex items-center gap-2'
        }
      }
    }
  }
})

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: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
              link: 'inline-flex items-center gap-2'
            }
          }
        }
      }
    })
  ]
})

标题 2

v4 版本有什么新功能？

## What's new in v4?

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h2: {
        slots: {
          base: [
            'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
            '[&>a>code]:transition-colors'
          ],
          leading: [
            'absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted',
            'transition'
          ],
          leadingIcon: 'size-4 shrink-0',
          link: 'group lg:ps-2 lg:-ms-2'
        }
      }
    }
  }
})

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: {
          h2: {
            slots: {
              base: [
                'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
                '[&>a>code]:transition-colors'
              ],
              leading: [
                'absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted',
                'transition'
              ],
              leadingIcon: 'size-4 shrink-0',
              link: 'group lg:ps-2 lg:-ms-2'
            }
          }
        }
      }
    })
  ]
})

标题 3

增强的组件

### Enhanced components

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h3: {
        slots: {
          base: [
            'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
            '[&>a>code]:transition-colors'
          ],
          leading: [
            'absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted',
            'transition'
          ],
          leadingIcon: 'size-4 shrink-0',
          link: 'group lg:ps-2 lg:-ms-2'
        }
      }
    }
  }
})

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: {
          h3: {
            slots: {
              base: [
                'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
                '[&>a>code]:transition-colors'
              ],
              leading: [
                'absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted',
                'transition'
              ],
              leadingIcon: 'size-4 shrink-0',
              link: 'group lg:ps-2 lg:-ms-2'
            }
          }
        }
      }
    })
  ]
})

标题 4

入门

#### Getting started

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h4: {
        slots: {
          base: 'text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary',
          link: ''
        }
      }
    }
  }
})

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: {
          h4: {
            slots: {
              base: 'text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary',
              link: ''
            }
          }
        }
      }
    })
  ]
})

文本格式

用清晰的段落和一致的文本格式来构建您的内容，以提高可读性。

段落

Nuxt UI 提供了一套全面的 Vue 组件、可组合函数和实用工具，用于构建具有一致设计和增强用户体验的现代、无障碍应用程序。

Nuxt UI provides a comprehensive collection of Vue components, composables and utilities for building modern, accessible applications with consistent design and enhanced user experience.

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      p: {
        base: 'my-5 leading-7 text-pretty'
      }
    }
  }
})

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: {
          p: {
            base: 'my-5 leading-7 text-pretty'
          }
        }
      }
    })
  ]
})

加粗

加粗文本

**Strong text**

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      strong: {
        base: ''
      }
    }
  }
})

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: {
          strong: {
            base: ''
          }
        }
      }
    })
  ]
})

强调

强调文本

*Emphasized text*

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      em: {
        base: ''
      }
    }
  }
})

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: {
          em: {
            base: ''
          }
        }
      }
    })
  ]
})

链接

要创建链接，请将链接文本括在方括号中，后跟括号中的 URL。适用于外部和内部链接。

Nuxt 文档

[Nuxt documentation](https://nuxtjs.org.cn)

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      a: {
        base: [
          'text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary',
          'transition-colors [&>code]:transition-colors'
        ]
      }
    }
  }
})

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: {
          a: {
            base: [
              'text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary',
              'transition-colors [&>code]:transition-colors'
            ]
          }
        }
      }
    })
  ]
})

引用块

使用引用块来突出显示重要信息或引文。

Nuxt UI 会自动适应您的主题设置，确保整个应用程序的排版一致性。

> Nuxt UI automatically adapts to your theme settings, ensuring consistent typography across your entire application.

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      blockquote: {
        base: 'border-s-4 border-accented ps-4 italic'
      }
    }
  }
})

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: {
          blockquote: {
            base: 'border-s-4 border-accented ps-4 italic'
          }
        }
      }
    })
  ]
})

水平线

使用水平线来在视觉上分隔内容部分。

---

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      hr: {
        base: 'border-t border-default my-12'
      }
    }
  }
})

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: {
          hr: {
            base: 'border-t border-default my-12'
          }
        }
      }
    })
  ]
})

简介

精美的排版组件和实用工具，用 Nuxt UI 来美化您的内容。

列表和表格

用风格化的列表和响应式表格来组织信息，实现清晰、一致的可读性。