标题和文本
精美的标题，段落，文本格式和链接，以实现最佳可读性。
标题
使用标题来组织你的内容，使其更容易阅读。
当标题有一个id时，标题可以被包装在一个锚链接中，H2和H3（在大屏幕上）的hover上会显示一个哈希图标，这样读者就可以直接链接到一个部分。
当使用@nuxt/content时，H2到H4的锚链接默认为启用，否则为禁用，包括Comark。使用anchor道具的Theme组件可以在应用的某个部分切换它们：
<template>
<UTheme :props="{ prose: { h2: { anchor: true }, h3: { anchor: true }, h4: { anchor: true } } }">
<!-- your rendered markdown -->
</UTheme>
</template>
使用
@nuxt/content时，H2、H3和H4默认开启锚链接。您可以控制它们的generation（例如，在AI聊天界面中禁用它们），也可以控制您的nuxt.config.ts中的toc generation：nuxt.config.ts
export default defineNuxtConfig({
content: {
renderer: {
anchorLinks: false
},
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
## 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]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>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 group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
'transition'
],
leadingIcon: 'size-4 shrink-0',
link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-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]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>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 group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
'transition'
],
leadingIcon: 'size-4 shrink-0',
link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-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]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>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 group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
'transition'
],
leadingIcon: 'size-4 shrink-0',
link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-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]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>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 group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
'transition'
],
leadingIcon: 'size-4 shrink-0',
link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-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]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3',
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]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3',
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
强文本
**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 documentation](https://nuxt.com)
app.config.ts
export default defineAppConfig({
ui: {
prose: {
a: {
base: [
'text-primary border-b border-transparent hover:border-primary font-medium rounded-xs outline-primary/25 focus-visible:outline-3 focus-visible:has-[>code]:outline-0 [&>code]:border-dashed [&>code]:outline-primary/25 focus-visible:[&>code]:outline-3 hover:[&>code]:border-primary hover:[&>code]:text-primary focus-visible:[&>code]:border-primary focus-visible:[&>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 rounded-xs outline-primary/25 focus-visible:outline-3 focus-visible:has-[>code]:outline-0 [&>code]:border-dashed [&>code]:outline-primary/25 focus-visible:[&>code]:outline-3 hover:[&>code]:border-primary hover:[&>code]:text-primary focus-visible:[&>code]:border-primary focus-visible:[&>code]:text-primary',
'transition-colors [&>code]:transition-colors'
]
}
}
}
})
]
})Blockquotes
使用blockquotes来突出重要的信息或引用。
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'
}
}
}
})
]
})