排版专业版
用法
当使用 Nuxt UI Pro v3 搭配Nuxt Content v3时,您可以访问一套预设样式的散文组件。
当使用<ContentRenderer>
组件时,您的 Markdown 内容将自动应用精美的排版和一致的间距。这包括标题、段落、列表、表格、代码块等——无需额外配置。
散文组件
散文组件是 @nuxtjs/mdc
模块引入的 HTML 排版标签的替代品,@nuxtjs/mdc
Nuxt UI Pro 会覆盖每个组件,以提供一致的外观和体验。
Prose
前缀直接在模板中使用散文组件。<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>
h1
Nuxt UI
# Nuxt UI
export default defineAppConfig({
uiPro: {
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'
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
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'
}
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
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'
}
}
}
}
})
]
})
h2
export default defineAppConfig({
uiPro: {
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'
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
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'
}
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
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'
}
}
}
}
})
]
})
h3
export default defineAppConfig({
uiPro: {
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'
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
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'
}
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
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'
}
}
}
}
})
]
})
h4
#### Install Nuxt UI
export default defineAppConfig({
uiPro: {
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: ''
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
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: ''
}
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
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: ''
}
}
}
}
})
]
})
p
Nuxt UI Pro 是一系列基于 Nuxt UI 构建的 Vue 组件、可组合函数和工具,专注于结构和布局,旨在用作应用程序的构建块。
Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
export default defineAppConfig({
uiPro: {
prose: {
p: {
base: 'my-5 leading-7 text-pretty'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
p: {
base: 'my-5 leading-7 text-pretty'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
p: {
base: 'my-5 leading-7 text-pretty'
}
}
}
})
]
})
a
[Nuxt documentation](https://nuxtjs.org.cn)
export default defineAppConfig({
uiPro: {
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'
]
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
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'
]
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
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'
]
}
}
}
})
]
})
blockquote
尽管 Nuxt UI 是免费和开源的,但 Nuxt UI Pro 是一款高级产品,旨在支持 Nuxt 开源软件的开发。请查阅许可部分以了解更多信息。
> While Nuxt UI is free and open source, Nuxt UI Pro is a premium product that helps sustain Nuxt OSS development, check out the License section to learn more.
export default defineAppConfig({
uiPro: {
prose: {
blockquote: {
base: 'border-s-4 border-accented ps-4 italic'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
blockquote: {
base: 'border-s-4 border-accented ps-4 italic'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
blockquote: {
base: 'border-s-4 border-accented ps-4 italic'
}
}
}
})
]
})
strong
加粗文本
**Strong text**
export default defineAppConfig({
uiPro: {
prose: {
strong: {
base: ''
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
strong: {
base: ''
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
strong: {
base: ''
}
}
}
})
]
})
em
强调文本
*Emphasized text*
export default defineAppConfig({
uiPro: {
prose: {
em: {
base: ''
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
em: {
base: ''
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
em: {
base: ''
}
}
}
})
]
})
ul
- 我是一个列表项。
- 我是另一个列表项。
- 我是最后一个列表项。
- I'm a list item.
- I'm another list item.
- I'm the last list item.
export default defineAppConfig({
uiPro: {
prose: {
ul: {
base: 'list-disc ps-6 my-5 marker:text-(--ui-border-accented)'
},
li: {
base: 'my-1.5 ps-1.5 leading-7 [&>ul]:my-0'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
ul: {
base: 'list-disc ps-6 my-5 marker:text-(--ui-border-accented)'
},
li: {
base: 'my-1.5 ps-1.5 leading-7 [&>ul]:my-0'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
ul: {
base: 'list-disc ps-6 my-5 marker:text-(--ui-border-accented)'
},
li: {
base: 'my-1.5 ps-1.5 leading-7 [&>ul]:my-0'
}
}
}
})
]
})
ol
- 我是一个列表项。
- 我是另一个列表项。
- 我是最后一个列表项。
1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.
export default defineAppConfig({
uiPro: {
prose: {
ol: {
base: 'list-decimal ps-6 my-5 marker:text-muted'
},
li: {
base: 'my-1.5 ps-1.5 leading-7 [&>ul]:my-0'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
ol: {
base: 'list-decimal ps-6 my-5 marker:text-muted'
},
li: {
base: 'my-1.5 ps-1.5 leading-7 [&>ul]:my-0'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
ol: {
base: 'list-decimal ps-6 my-5 marker:text-muted'
},
li: {
base: 'my-1.5 ps-1.5 leading-7 [&>ul]:my-0'
}
}
}
})
]
})
hr
---
export default defineAppConfig({
uiPro: {
prose: {
hr: {
base: 'border-t border-default my-12'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
hr: {
base: 'border-t border-default my-12'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
hr: {
base: 'border-t border-default my-12'
}
}
}
})
]
})
table
属性 | 默认值 | 类型 |
---|---|---|
name | string | |
尺寸 | 中等尺寸 | string |
color | neutral | string |
| Prop | Default | Type |
|---------|-----------|--------------------------|
| `name` | | `string`{lang="ts-type"} |
| `size` | `md` | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
export default defineAppConfig({
uiPro: {
prose: {
table: {
slots: {
root: 'relative my-5 overflow-x-auto',
base: 'w-full border-separate border-spacing-0 rounded-md'
}
},
thead: {
base: 'bg-muted'
},
tbody: {
base: ''
},
tr: {
base: '[&:first-child>th:first-child]:rounded-tl-md [&:first-child>th:last-child]:rounded-tr-md [&:last-child>td:first-child]:rounded-bl-md [&:last-child>td:last-child]:rounded-br-md'
},
th: {
base: 'py-3 px-4 font-semibold text-sm text-left border-e border-b first:border-s border-t border-muted'
},
td: {
base: 'py-3 px-4 text-sm text-left align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
table: {
slots: {
root: 'relative my-5 overflow-x-auto',
base: 'w-full border-separate border-spacing-0 rounded-md'
}
},
thead: {
base: 'bg-muted'
},
tbody: {
base: ''
},
tr: {
base: '[&:first-child>th:first-child]:rounded-tl-md [&:first-child>th:last-child]:rounded-tr-md [&:last-child>td:first-child]:rounded-bl-md [&:last-child>td:last-child]:rounded-br-md'
},
th: {
base: 'py-3 px-4 font-semibold text-sm text-left border-e border-b first:border-s border-t border-muted'
},
td: {
base: 'py-3 px-4 text-sm text-left align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
table: {
slots: {
root: 'relative my-5 overflow-x-auto',
base: 'w-full border-separate border-spacing-0 rounded-md'
}
},
thead: {
base: 'bg-muted'
},
tbody: {
base: ''
},
tr: {
base: '[&:first-child>th:first-child]:rounded-tl-md [&:first-child>th:last-child]:rounded-tr-md [&:last-child>td:first-child]:rounded-bl-md [&:last-child>td:last-child]:rounded-br-md'
},
th: {
base: 'py-3 px-4 font-semibold text-sm text-left border-e border-b first:border-s border-t border-muted'
},
td: {
base: 'py-3 px-4 text-sm text-left align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5'
}
}
}
})
]
})
img

属性 | 默认值 | 类型 |
---|---|---|
src |
| |
alt |
| |
width |
| |
height |
| |
zoom |
|
点击图片放大 |
ui |
|
export default defineAppConfig({
uiPro: {
prose: {
img: {
slots: {
base: 'rounded-md',
overlay: 'fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity',
content: 'fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none p-4 sm:p-8'
},
variants: {
zoom: {
true: 'will-change-transform'
},
open: {
true: ''
}
},
compoundVariants: [
{
zoom: true,
open: false,
class: 'cursor-zoom-in'
}
]
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
img: {
slots: {
base: 'rounded-md',
overlay: 'fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity',
content: 'fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none p-4 sm:p-8'
},
variants: {
zoom: {
true: 'will-change-transform'
},
open: {
true: ''
}
},
compoundVariants: [
{
zoom: true,
open: false,
class: 'cursor-zoom-in'
}
]
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
img: {
slots: {
base: 'rounded-md',
overlay: 'fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity',
content: 'fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none p-4 sm:p-8'
},
variants: {
zoom: {
true: 'will-change-transform'
},
open: {
true: ''
}
},
compoundVariants: [
{
zoom: true,
open: false,
class: 'cursor-zoom-in'
}
]
}
}
}
})
]
})
code
行内代码
`inline code`
您可以使用 color
属性指定代码块的颜色。默认为 neutral
。
行内代码
`inline code`{color="error"}
您可以使用 lang
属性指定代码块的语言。
nuxt.config.ts
`nuxt.config.ts`{lang="ts-type"}
属性 | 默认值 | 类型 |
---|---|---|
lang |
| |
color |
|
|
export default defineAppConfig({
uiPro: {
prose: {
code: {
base: 'px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block',
variants: {
color: {
primary: 'border border-primary/25 bg-primary/10 text-primary',
secondary: 'border border-secondary/25 bg-secondary/10 text-secondary',
success: 'border border-success/25 bg-success/10 text-success',
info: 'border border-info/25 bg-info/10 text-info',
warning: 'border border-warning/25 bg-warning/10 text-warning',
error: 'border border-error/25 bg-error/10 text-error',
neutral: 'border border-muted text-highlighted bg-muted'
}
},
defaultVariants: {
color: 'neutral'
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
code: {
base: 'px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block',
variants: {
color: {
primary: 'border border-primary/25 bg-primary/10 text-primary',
secondary: 'border border-secondary/25 bg-secondary/10 text-secondary',
success: 'border border-success/25 bg-success/10 text-success',
info: 'border border-info/25 bg-info/10 text-info',
warning: 'border border-warning/25 bg-warning/10 text-warning',
error: 'border border-error/25 bg-error/10 text-error',
neutral: 'border border-muted text-highlighted bg-muted'
}
},
defaultVariants: {
color: 'neutral'
}
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
code: {
base: 'px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block',
variants: {
color: {
primary: 'border border-primary/25 bg-primary/10 text-primary',
secondary: 'border border-secondary/25 bg-secondary/10 text-secondary',
success: 'border border-success/25 bg-success/10 text-success',
info: 'border border-info/25 bg-info/10 text-info',
warning: 'border border-warning/25 bg-warning/10 text-warning',
error: 'border border-error/25 bg-error/10 text-error',
neutral: 'border border-muted text-highlighted bg-muted'
}
},
defaultVariants: {
color: 'neutral'
}
}
}
}
})
]
})
pre
代码块由 ProsePre
组件和 @nuxtjs/mdc
渲染,代码高亮由Shiki.
material-theme-lighter
和 material-theme-palenight
VSCode 主题分别用于亮色和暗色模式。您可以在 nuxt.config.ts
中通过content.build.markdown.highlight
键进行更改。export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
```ts
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
```
编写代码块时,您可以指定一个文件名,该文件将显示在代码块顶部。将根据扩展名或名称自动显示一个图标。
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
```
app.config.ts
中的 uiPro.prose.codeIcon
键添加更多图标。export default defineAppConfig({
uiPro: {
prose: {
codeIcon: {
terminal: 'i-ph-terminal-window-duotone'
}
}
}
})
每个代码块都有一个内置的复制按钮,可以将代码复制到剪贴板。
app.config.ts
中通过 ui.icons.copy
和 ui.icons.copyCheck
键更改图标。export default defineAppConfig({
ui: {
icons: {
copy: 'i-lucide-copy',
copyCheck: 'i-lucide-copy-check'
}
}
})
属性 | 默认值 | 类型 |
---|---|---|
图标 |
| |
code |
| |
language |
| |
filename |
| |
highlights |
| |
hideHeader |
| |
meta |
| |
ui |
|
export default defineAppConfig({
uiPro: {
prose: {
pre: {
slots: {
root: 'relative my-5 group',
header: 'flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3',
filename: 'text-default text-sm/6',
icon: 'size-4 shrink-0',
copy: 'absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition',
base: 'group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:outline-none'
},
variants: {
filename: {
true: {
root: '[&>pre]:rounded-t-none [&>pre]:my-0 my-5'
}
}
}
},
codeIcon: {
'package.json': 'i-vscode-icons-file-type-node',
'tsconfig.json': 'i-vscode-icons-file-type-tsconfig',
'.npmrc': 'i-vscode-icons-file-type-npm',
'.editorconfig': 'i-vscode-icons-file-type-editorconfig',
'.eslintrc': 'i-vscode-icons-file-type-eslint',
'.eslintrc.cjs': 'i-vscode-icons-file-type-eslint',
'.eslintignore': 'i-vscode-icons-file-type-eslint',
'eslint.config.js': 'i-vscode-icons-file-type-eslint',
'eslint.config.mjs': 'i-vscode-icons-file-type-eslint',
'eslint.config.cjs': 'i-vscode-icons-file-type-eslint',
'.gitignore': 'i-vscode-icons-file-type-git',
'yarn.lock': 'i-vscode-icons-file-type-yarn',
'.env': 'i-vscode-icons-file-type-dotenv',
'.env.example': 'i-vscode-icons-file-type-dotenv',
'.vscode/settings.json': 'i-vscode-icons-file-type-vscode',
nuxt: 'i-vscode-icons-file-type-nuxt',
'.nuxtrc': 'i-vscode-icons-file-type-nuxt',
'.nuxtignore': 'i-vscode-icons-file-type-nuxt',
'nuxt.config.js': 'i-vscode-icons-file-type-nuxt',
'nuxt.config.ts': 'i-vscode-icons-file-type-nuxt',
'nuxt.schema.ts': 'i-vscode-icons-file-type-nuxt',
'tailwind.config.js': 'i-vscode-icons-file-type-tailwind',
'tailwind.config.ts': 'i-vscode-icons-file-type-tailwind',
vue: 'i-vscode-icons-file-type-vue',
ts: 'i-vscode-icons-file-type-typescript',
tsx: 'i-vscode-icons-file-type-typescript',
mjs: 'i-vscode-icons-file-type-js',
cjs: 'i-vscode-icons-file-type-js',
js: 'i-vscode-icons-file-type-js',
jsx: 'i-vscode-icons-file-type-js',
md: 'i-vscode-icons-file-type-markdown',
py: 'i-vscode-icons-file-type-python',
cs: 'i-vscode-icons-file-type-csharp',
asm: 'i-vscode-icons-file-type-assembly',
f: 'i-vscode-icons-file-type-fortran',
hs: 'i-vscode-icons-file-type-haskell',
fs: 'i-vscode-icons-file-type-fsharp',
kt: 'i-vscode-icons-file-type-kotlin',
rs: 'i-vscode-icons-file-type-rust',
rb: 'i-vscode-icons-file-type-ruby',
lsp: 'i-vscode-icons-file-type-lisp',
ps1: 'i-vscode-icons-file-type-powershell',
psd1: 'i-vscode-icons-file-type-powershell',
psm1: 'i-vscode-icons-file-type-powershell',
go: 'i-vscode-icons-file-type-go',
gleam: 'i-vscode-icons-file-type-gleam',
bicep: 'i-vscode-icons-file-type-bicep',
bicepparam: 'i-vscode-icons-file-type-bicep',
exs: 'i-vscode-icons-file-type-elixir',
erl: 'i-vscode-icons-file-type-erlang',
sbt: 'i-vscode-icons-file-type-scala',
h: 'i-vscode-icons-file-type-cppheader',
ino: 'i-vscode-icons-file-type-arduino',
pl: 'i-vscode-icons-file-type-perl',
jl: 'i-vscode-icons-file-type-julia',
dart: 'i-vscode-icons-file-type-dartlang',
ico: 'i-vscode-icons-file-type-favicon',
npm: 'i-vscode-icons-file-type-npm',
pnpm: 'i-vscode-icons-file-type-pnpm',
npx: 'i-vscode-icons-file-type-npm',
yarn: 'i-vscode-icons-file-type-yarn',
bun: 'i-vscode-icons-file-type-bun',
yml: 'i-vscode-icons-file-type-yaml',
terminal: 'i-lucide-terminal'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
pre: {
slots: {
root: 'relative my-5 group',
header: 'flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3',
filename: 'text-default text-sm/6',
icon: 'size-4 shrink-0',
copy: 'absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition',
base: 'group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:outline-none'
},
variants: {
filename: {
true: {
root: '[&>pre]:rounded-t-none [&>pre]:my-0 my-5'
}
}
}
},
codeIcon: {
'package.json': 'i-vscode-icons-file-type-node',
'tsconfig.json': 'i-vscode-icons-file-type-tsconfig',
'.npmrc': 'i-vscode-icons-file-type-npm',
'.editorconfig': 'i-vscode-icons-file-type-editorconfig',
'.eslintrc': 'i-vscode-icons-file-type-eslint',
'.eslintrc.cjs': 'i-vscode-icons-file-type-eslint',
'.eslintignore': 'i-vscode-icons-file-type-eslint',
'eslint.config.js': 'i-vscode-icons-file-type-eslint',
'eslint.config.mjs': 'i-vscode-icons-file-type-eslint',
'eslint.config.cjs': 'i-vscode-icons-file-type-eslint',
'.gitignore': 'i-vscode-icons-file-type-git',
'yarn.lock': 'i-vscode-icons-file-type-yarn',
'.env': 'i-vscode-icons-file-type-dotenv',
'.env.example': 'i-vscode-icons-file-type-dotenv',
'.vscode/settings.json': 'i-vscode-icons-file-type-vscode',
nuxt: 'i-vscode-icons-file-type-nuxt',
'.nuxtrc': 'i-vscode-icons-file-type-nuxt',
'.nuxtignore': 'i-vscode-icons-file-type-nuxt',
'nuxt.config.js': 'i-vscode-icons-file-type-nuxt',
'nuxt.config.ts': 'i-vscode-icons-file-type-nuxt',
'nuxt.schema.ts': 'i-vscode-icons-file-type-nuxt',
'tailwind.config.js': 'i-vscode-icons-file-type-tailwind',
'tailwind.config.ts': 'i-vscode-icons-file-type-tailwind',
vue: 'i-vscode-icons-file-type-vue',
ts: 'i-vscode-icons-file-type-typescript',
tsx: 'i-vscode-icons-file-type-typescript',
mjs: 'i-vscode-icons-file-type-js',
cjs: 'i-vscode-icons-file-type-js',
js: 'i-vscode-icons-file-type-js',
jsx: 'i-vscode-icons-file-type-js',
md: 'i-vscode-icons-file-type-markdown',
py: 'i-vscode-icons-file-type-python',
cs: 'i-vscode-icons-file-type-csharp',
asm: 'i-vscode-icons-file-type-assembly',
f: 'i-vscode-icons-file-type-fortran',
hs: 'i-vscode-icons-file-type-haskell',
fs: 'i-vscode-icons-file-type-fsharp',
kt: 'i-vscode-icons-file-type-kotlin',
rs: 'i-vscode-icons-file-type-rust',
rb: 'i-vscode-icons-file-type-ruby',
lsp: 'i-vscode-icons-file-type-lisp',
ps1: 'i-vscode-icons-file-type-powershell',
psd1: 'i-vscode-icons-file-type-powershell',
psm1: 'i-vscode-icons-file-type-powershell',
go: 'i-vscode-icons-file-type-go',
gleam: 'i-vscode-icons-file-type-gleam',
bicep: 'i-vscode-icons-file-type-bicep',
bicepparam: 'i-vscode-icons-file-type-bicep',
exs: 'i-vscode-icons-file-type-elixir',
erl: 'i-vscode-icons-file-type-erlang',
sbt: 'i-vscode-icons-file-type-scala',
h: 'i-vscode-icons-file-type-cppheader',
ino: 'i-vscode-icons-file-type-arduino',
pl: 'i-vscode-icons-file-type-perl',
jl: 'i-vscode-icons-file-type-julia',
dart: 'i-vscode-icons-file-type-dartlang',
ico: 'i-vscode-icons-file-type-favicon',
npm: 'i-vscode-icons-file-type-npm',
pnpm: 'i-vscode-icons-file-type-pnpm',
npx: 'i-vscode-icons-file-type-npm',
yarn: 'i-vscode-icons-file-type-yarn',
bun: 'i-vscode-icons-file-type-bun',
yml: 'i-vscode-icons-file-type-yaml',
terminal: 'i-lucide-terminal'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
pre: {
slots: {
root: 'relative my-5 group',
header: 'flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3',
filename: 'text-default text-sm/6',
icon: 'size-4 shrink-0',
copy: 'absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition',
base: 'group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:outline-none'
},
variants: {
filename: {
true: {
root: '[&>pre]:rounded-t-none [&>pre]:my-0 my-5'
}
}
}
},
codeIcon: {
'package.json': 'i-vscode-icons-file-type-node',
'tsconfig.json': 'i-vscode-icons-file-type-tsconfig',
'.npmrc': 'i-vscode-icons-file-type-npm',
'.editorconfig': 'i-vscode-icons-file-type-editorconfig',
'.eslintrc': 'i-vscode-icons-file-type-eslint',
'.eslintrc.cjs': 'i-vscode-icons-file-type-eslint',
'.eslintignore': 'i-vscode-icons-file-type-eslint',
'eslint.config.js': 'i-vscode-icons-file-type-eslint',
'eslint.config.mjs': 'i-vscode-icons-file-type-eslint',
'eslint.config.cjs': 'i-vscode-icons-file-type-eslint',
'.gitignore': 'i-vscode-icons-file-type-git',
'yarn.lock': 'i-vscode-icons-file-type-yarn',
'.env': 'i-vscode-icons-file-type-dotenv',
'.env.example': 'i-vscode-icons-file-type-dotenv',
'.vscode/settings.json': 'i-vscode-icons-file-type-vscode',
nuxt: 'i-vscode-icons-file-type-nuxt',
'.nuxtrc': 'i-vscode-icons-file-type-nuxt',
'.nuxtignore': 'i-vscode-icons-file-type-nuxt',
'nuxt.config.js': 'i-vscode-icons-file-type-nuxt',
'nuxt.config.ts': 'i-vscode-icons-file-type-nuxt',
'nuxt.schema.ts': 'i-vscode-icons-file-type-nuxt',
'tailwind.config.js': 'i-vscode-icons-file-type-tailwind',
'tailwind.config.ts': 'i-vscode-icons-file-type-tailwind',
vue: 'i-vscode-icons-file-type-vue',
ts: 'i-vscode-icons-file-type-typescript',
tsx: 'i-vscode-icons-file-type-typescript',
mjs: 'i-vscode-icons-file-type-js',
cjs: 'i-vscode-icons-file-type-js',
js: 'i-vscode-icons-file-type-js',
jsx: 'i-vscode-icons-file-type-js',
md: 'i-vscode-icons-file-type-markdown',
py: 'i-vscode-icons-file-type-python',
cs: 'i-vscode-icons-file-type-csharp',
asm: 'i-vscode-icons-file-type-assembly',
f: 'i-vscode-icons-file-type-fortran',
hs: 'i-vscode-icons-file-type-haskell',
fs: 'i-vscode-icons-file-type-fsharp',
kt: 'i-vscode-icons-file-type-kotlin',
rs: 'i-vscode-icons-file-type-rust',
rb: 'i-vscode-icons-file-type-ruby',
lsp: 'i-vscode-icons-file-type-lisp',
ps1: 'i-vscode-icons-file-type-powershell',
psd1: 'i-vscode-icons-file-type-powershell',
psm1: 'i-vscode-icons-file-type-powershell',
go: 'i-vscode-icons-file-type-go',
gleam: 'i-vscode-icons-file-type-gleam',
bicep: 'i-vscode-icons-file-type-bicep',
bicepparam: 'i-vscode-icons-file-type-bicep',
exs: 'i-vscode-icons-file-type-elixir',
erl: 'i-vscode-icons-file-type-erlang',
sbt: 'i-vscode-icons-file-type-scala',
h: 'i-vscode-icons-file-type-cppheader',
ino: 'i-vscode-icons-file-type-arduino',
pl: 'i-vscode-icons-file-type-perl',
jl: 'i-vscode-icons-file-type-julia',
dart: 'i-vscode-icons-file-type-dartlang',
ico: 'i-vscode-icons-file-type-favicon',
npm: 'i-vscode-icons-file-type-npm',
pnpm: 'i-vscode-icons-file-type-pnpm',
npx: 'i-vscode-icons-file-type-npm',
yarn: 'i-vscode-icons-file-type-yarn',
bun: 'i-vscode-icons-file-type-bun',
yml: 'i-vscode-icons-file-type-yaml',
terminal: 'i-lucide-terminal'
}
}
}
})
]
})
Vue 组件
Nuxt UI Pro 还提供了一套 Vue 组件,帮助您使用MDC 语法.
Accordion
使用 accordion
和 accordion-item
组件在您的内容中显示一个手风琴。
迁移到 v3 涉及重大变化,包括新的组件结构、更新的主题方法和修订的 TypeScript 定义。我们建议采取谨慎、渐进的升级过程,从开发环境中的全面测试开始。
Nuxt UI 现在与 Vue 兼容!您可以按照安装指南开始使用。
我们还从头开始重建了 Nuxt UI Pro 并发布了 v3.0.0-alpha.x
包,但目前它只包含构建此文档的组件。这将是一个免费更新,因此您现在购买的许可证将对 v3 有效。我们正在积极努力完成所有 Nuxt UI Pro 组件的重写。
::accordion
::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"}
The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.
::
::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"}
Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation/vue) to get started.
::
::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"}
We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components.
::
::
属性 | 默认值 | 类型 |
---|---|---|
type |
|
|
export default defineAppConfig({
uiPro: {
prose: {
accordion: {
slots: {
root: 'my-5',
trigger: 'text-base'
}
},
accordionItem: {
base: 'pb-4 text-muted *:first:mt-0 *:last:mb-0 *:my-1.5'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
accordion: {
slots: {
root: 'my-5',
trigger: 'text-base'
}
},
accordionItem: {
base: 'pb-4 text-muted *:first:mt-0 *:last:mb-0 *:my-1.5'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
accordion: {
slots: {
root: 'my-5',
trigger: 'text-base'
}
},
accordionItem: {
base: 'pb-4 text-muted *:first:mt-0 *:last:mb-0 *:my-1.5'
}
}
}
})
]
})
Badge
在 badge
组件的默认插槽中使用 Markdown 来显示内容中的徽章。
::badge
**v3.0.0**
::
export default defineAppConfig({
uiPro: {
prose: {
badge: {
base: 'rounded-full'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
badge: {
base: 'rounded-full'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
badge: {
base: 'rounded-full'
}
}
}
})
]
})
标注
在 callout
组件的默认插槽中使用 Markdown,为您的内容添加引人注目的上下文。
使用 icon
和 color
属性来自定义。您还可以传递来自<NuxtLink>
组件的任何属性。
::callout{icon="i-lucide-square-play" color="neutral" to="/getting-started/installation/pro/nuxt"}
This is a `callout` with full **markdown** support.
::
您还可以使用预定义图标和颜色的 note
、tip
、warning
和 caution
快捷方式。
::note
Here's some additional information.
::
::tip
Here's a helpful suggestion.
::
::warning
Be careful with this action as it might have unexpected results.
::
::caution
This action cannot be undone.
::
Card
在 card
组件的默认插槽中使用 Markdown 来突出显示您的内容。
使用 title
、icon
和 color
属性来自定义。您还可以传递来自<NuxtLink>
.
::card{title="Startup" icon="i-lucide-users" color="primary" to="https://nuxt.lemonsqueezy.com" target="_blank"}
Best suited for small teams, startups and agencies with up to 5 developers.
::
CardGroup
使用 card-group
组件包裹您的 card
组件,将它们分组显示在网格布局中。
::card-group
::card
---
title: Dashboard
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/dashboard
target: _blank
---
A dashboard with multi-column layout.
::
::card
---
title: SaaS
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/saas
target: _blank
---
A template with landing, pricing, docs and blog.
::
::card
---
title: Docs
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/docs
target: _blank
---
A documentation with `@nuxt/content`.
::
::card
---
title: Landing
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/landing
target: _blank
---
A landing page you can use as starting point.
::
::
export default defineAppConfig({
uiPro: {
prose: {
cardGroup: {
base: 'grid grid-cols-1 sm:grid-cols-2 gap-5 my-5 *:my-0'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
cardGroup: {
base: 'grid grid-cols-1 sm:grid-cols-2 gap-5 my-5 *:my-0'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
cardGroup: {
base: 'grid grid-cols-1 sm:grid-cols-2 gap-5 my-5 *:my-0'
}
}
}
})
]
})
CodeCollapse
使用 code-collapse
组件包裹您的代码块,以显示可折叠的代码块。
@import "tailwindcss";
@import "@nuxt/ui-pro";
@theme static {
--font-sans: 'Public Sans', sans-serif;
--breakpoint-3xl: 1920px;
--color-green-50: #EFFDF5;
--color-green-100: #D9FBE8;
--color-green-200: #B3F5D1;
--color-green-300: #75EDAE;
--color-green-400: #00DC82;
--color-green-500: #00C16A;
--color-green-600: #00A155;
--color-green-700: #007F45;
--color-green-800: #016538;
--color-green-900: #0A5331;
--color-green-950: #052E16;
}
::code-collapse
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
@theme static {
--font-sans: 'Public Sans', sans-serif;
--breakpoint-3xl: 1920px;
--color-green-50: #EFFDF5;
--color-green-100: #D9FBE8;
--color-green-200: #B3F5D1;
--color-green-300: #75EDAE;
--color-green-400: #00DC82;
--color-green-500: #00C16A;
--color-green-600: #00A155;
--color-green-700: #007F45;
--color-green-800: #016538;
--color-green-900: #0A5331;
--color-green-950: #052E16;
}
```
::
属性 | 默认值 | 类型 |
---|---|---|
图标 |
|
用于切换代码显示的图标。 |
name |
|
显示在触发器标签中的名称。 |
openText |
|
代码折叠时显示的文本。 |
closeText |
|
代码展开时显示的文本。 |
open |
| |
ui |
|
export default defineAppConfig({
uiPro: {
prose: {
codeCollapse: {
slots: {
root: 'relative [&_pre]:h-[200px]',
footer: 'h-16 absolute inset-x-px bottom-px rounded-b-md flex items-center justify-center',
trigger: 'group',
triggerIcon: 'group-data-[state=open]:rotate-180'
},
variants: {
open: {
true: {
root: '[&_pre]:h-auto [&_pre]:min-h-[200px] [&_pre]:max-h-[80vh] [&_pre]:pb-12'
},
false: {
root: '[&_pre]:overflow-hidden',
footer: 'bg-gradient-to-t from-muted'
}
}
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
codeCollapse: {
slots: {
root: 'relative [&_pre]:h-[200px]',
footer: 'h-16 absolute inset-x-px bottom-px rounded-b-md flex items-center justify-center',
trigger: 'group',
triggerIcon: 'group-data-[state=open]:rotate-180'
},
variants: {
open: {
true: {
root: '[&_pre]:h-auto [&_pre]:min-h-[200px] [&_pre]:max-h-[80vh] [&_pre]:pb-12'
},
false: {
root: '[&_pre]:overflow-hidden',
footer: 'bg-gradient-to-t from-muted'
}
}
}
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
codeCollapse: {
slots: {
root: 'relative [&_pre]:h-[200px]',
footer: 'h-16 absolute inset-x-px bottom-px rounded-b-md flex items-center justify-center',
trigger: 'group',
triggerIcon: 'group-data-[state=open]:rotate-180'
},
variants: {
open: {
true: {
root: '[&_pre]:h-auto [&_pre]:min-h-[200px] [&_pre]:max-h-[80vh] [&_pre]:pb-12'
},
false: {
root: '[&_pre]:overflow-hidden',
footer: 'bg-gradient-to-t from-muted'
}
}
}
}
}
}
})
]
})
CodeGroup
使用 code-group
组件包裹您的代码块,将它们分组显示在标签页中。
pnpm add @nuxt/ui-pro
yarn add @nuxt/ui-pro
npm install @nuxt/ui-pro
bun add @nuxt/ui-pro
::code-group
```bash [pnpm]
pnpm add @nuxt/ui-pro
```
```bash [yarn]
yarn add @nuxt/ui-pro
```
```bash [npm]
npm install @nuxt/ui-pro
```
```bash [bun]
bun add @nuxt/ui-pro
```
::
属性 | 默认值 | 类型 |
---|---|---|
defaultValue |
|
默认选择的标签页。 |
sync |
将选定的标签页与本地存储键同步。 | |
modelValue |
| |
ui |
|
export default defineAppConfig({
uiPro: {
prose: {
codeGroup: {
slots: {
root: 'relative group *:not-first:!my-0 *:not-first:!static my-5',
list: 'relative flex items-center gap-1 border border-muted bg-default border-b-0 rounded-t-md overflow-x-auto p-2',
indicator: 'absolute left-0 inset-y-2 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) transition-[translate,width] duration-200 bg-elevated rounded-md shadow-xs',
trigger: [
'relative inline-flex items-center gap-1.5 text-default data-[state=active]:text-highlighted hover:bg-elevated/50 px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus:outline-none',
'transition-colors'
],
triggerIcon: 'size-4 shrink-0',
triggerLabel: 'truncate'
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
codeGroup: {
slots: {
root: 'relative group *:not-first:!my-0 *:not-first:!static my-5',
list: 'relative flex items-center gap-1 border border-muted bg-default border-b-0 rounded-t-md overflow-x-auto p-2',
indicator: 'absolute left-0 inset-y-2 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) transition-[translate,width] duration-200 bg-elevated rounded-md shadow-xs',
trigger: [
'relative inline-flex items-center gap-1.5 text-default data-[state=active]:text-highlighted hover:bg-elevated/50 px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus:outline-none',
'transition-colors'
],
triggerIcon: 'size-4 shrink-0',
triggerLabel: 'truncate'
}
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
codeGroup: {
slots: {
root: 'relative group *:not-first:!my-0 *:not-first:!static my-5',
list: 'relative flex items-center gap-1 border border-muted bg-default border-b-0 rounded-t-md overflow-x-auto p-2',
indicator: 'absolute left-0 inset-y-2 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) transition-[translate,width] duration-200 bg-elevated rounded-md shadow-xs',
trigger: [
'relative inline-flex items-center gap-1.5 text-default data-[state=active]:text-highlighted hover:bg-elevated/50 px-2 py-1.5 text-sm rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus:outline-none',
'transition-colors'
],
triggerIcon: 'size-4 shrink-0',
triggerLabel: 'truncate'
}
}
}
}
})
]
})
CodePreview
使用 code-preview
组件包裹代码块,以使用 code
插槽显示 MDC 组件的预览及其代码。
行内代码
`inline code`
::code-preview
`inline code`
#code
```mdc
`inline code`
```
::
属性 | 默认值 | 类型 |
---|---|---|
ui |
|
export default defineAppConfig({
uiPro: {
prose: {
codePreview: {
slots: {
root: 'my-5',
preview: 'flex justify-center border border-muted relative p-4 rounded-md',
code: '[&>div>pre]:rounded-t-none [&>div]:my-0'
},
variants: {
code: {
true: {
preview: 'border-b-0 rounded-b-none'
}
}
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
codePreview: {
slots: {
root: 'my-5',
preview: 'flex justify-center border border-muted relative p-4 rounded-md',
code: '[&>div>pre]:rounded-t-none [&>div]:my-0'
},
variants: {
code: {
true: {
preview: 'border-b-0 rounded-b-none'
}
}
}
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
codePreview: {
slots: {
root: 'my-5',
preview: 'flex justify-center border border-muted relative p-4 rounded-md',
code: '[&>div>pre]:rounded-t-none [&>div]:my-0'
},
variants: {
code: {
true: {
preview: 'border-b-0 rounded-b-none'
}
}
}
}
}
}
})
]
})
CodeTree
使用 code-tree
组件按特定顺序包裹您的代码块,以显示文件树视图。
export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
colors: 'slate'
}
}
})
::code-tree{defaultValue="app/app.config.ts"}
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro'],
css: ['~/assets/css/main.css']
})
```
```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
```
```ts [app/app.config.ts]
export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
colors: 'slate'
}
}
})
```
```vue [app/app.vue]
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
```
```json [package.json]
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"typecheck": "nuxt typecheck"
},
"dependencies": {
"@iconify-json/lucide": "^1.2.18",
"@nuxt/ui-pro": "^3.0.0",
"nuxt": "^3.16.0"
},
"devDependencies": {
"typescript": "^5.8.2",
"vue-tsc": "^2.2.10"
}
}
```
```json [tsconfig.json]
{
"extends": "./.nuxt/tsconfig.json"
}
```
````md [README.md]
# Nuxt 3 Minimal Starter
Look at the [Nuxt 3 documentation](https://nuxtjs.org.cn/docs/getting-started/introduction) to learn more.
## Setup
Make sure to install the dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Development Server
Start the development server on `https://:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview
```
Check out the [deployment documentation](https://nuxtjs.org.cn/docs/getting-started/deployment) for more information.
````
::
属性 | 默认值 | 类型 |
---|---|---|
defaultValue |
默认选择的标签页。 | |
expandAll |
|
默认展开所有目录。 |
ui |
|
export default defineAppConfig({
uiPro: {
prose: {
codeTree: {
slots: {
root: 'relative lg:h-[450px] my-5 grid lg:grid-cols-3 border border-muted rounded-md',
list: 'isolate relative p-2 border-b lg:border-b-0 lg:border-e border-muted overflow-y-auto',
item: '',
listWithChildren: 'ms-4.5 border-s border-default',
itemWithChildren: 'ps-1.5 -ms-px',
link: 'relative group peer w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
linkLeadingIcon: 'size-4 shrink-0',
linkLabel: 'truncate',
linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-expanded:rotate-180',
content: 'overflow-hidden lg:col-span-2 flex flex-col [&>div]:my-0 [&>div]:flex-1 [&>div]:flex [&>div]:flex-col [&>div>div]:border-0 [&>div>pre]:border-b-0 [&>div>pre]:border-s-0 [&>div>pre]:border-e-0 [&>div>pre]:rounded-l-none [&>div>pre]:flex-1 [&>div]:overflow-y-auto'
},
variants: {
active: {
true: {
link: 'text-highlighted before:bg-elevated'
},
false: {
link: [
'hover:text-highlighted hover:before:bg-elevated/50',
'transition-colors before:transition-colors'
]
}
}
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
codeTree: {
slots: {
root: 'relative lg:h-[450px] my-5 grid lg:grid-cols-3 border border-muted rounded-md',
list: 'isolate relative p-2 border-b lg:border-b-0 lg:border-e border-muted overflow-y-auto',
item: '',
listWithChildren: 'ms-4.5 border-s border-default',
itemWithChildren: 'ps-1.5 -ms-px',
link: 'relative group peer w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
linkLeadingIcon: 'size-4 shrink-0',
linkLabel: 'truncate',
linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-expanded:rotate-180',
content: 'overflow-hidden lg:col-span-2 flex flex-col [&>div]:my-0 [&>div]:flex-1 [&>div]:flex [&>div]:flex-col [&>div>div]:border-0 [&>div>pre]:border-b-0 [&>div>pre]:border-s-0 [&>div>pre]:border-e-0 [&>div>pre]:rounded-l-none [&>div>pre]:flex-1 [&>div]:overflow-y-auto'
},
variants: {
active: {
true: {
link: 'text-highlighted before:bg-elevated'
},
false: {
link: [
'hover:text-highlighted hover:before:bg-elevated/50',
'transition-colors before:transition-colors'
]
}
}
}
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
codeTree: {
slots: {
root: 'relative lg:h-[450px] my-5 grid lg:grid-cols-3 border border-muted rounded-md',
list: 'isolate relative p-2 border-b lg:border-b-0 lg:border-e border-muted overflow-y-auto',
item: '',
listWithChildren: 'ms-4.5 border-s border-default',
itemWithChildren: 'ps-1.5 -ms-px',
link: 'relative group peer w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
linkLeadingIcon: 'size-4 shrink-0',
linkLabel: 'truncate',
linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-expanded:rotate-180',
content: 'overflow-hidden lg:col-span-2 flex flex-col [&>div]:my-0 [&>div]:flex-1 [&>div]:flex [&>div]:flex-col [&>div>div]:border-0 [&>div>pre]:border-b-0 [&>div>pre]:border-s-0 [&>div>pre]:border-e-0 [&>div>pre]:rounded-l-none [&>div>pre]:flex-1 [&>div]:overflow-y-auto'
},
variants: {
active: {
true: {
link: 'text-highlighted before:bg-elevated'
},
false: {
link: [
'hover:text-highlighted hover:before:bg-elevated/50',
'transition-colors before:transition-colors'
]
}
}
}
}
}
}
})
]
})
Collapsible
使用 collapsible
组件包裹您的内容,以在内容中显示一个可折叠区域。
属性 | 默认值 | 类型 |
---|---|---|
name | string | |
尺寸 | 中等尺寸 | string |
color | neutral | string |
::collapsible
| Prop | Default | Type |
|---------|-----------|--------------------------|
| `name` | | `string`{lang="ts-type"} |
| `size` | `md` | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
::
属性 | 默认值 | 类型 |
---|---|---|
图标 |
|
用于切换代码显示的图标。 |
name |
|
显示在触发器标签中的名称。 |
openText |
|
代码折叠时显示的文本。 |
closeText |
|
代码展开时显示的文本。 |
ui |
|
export default defineAppConfig({
uiPro: {
prose: {
collapsible: {
slots: {
root: 'my-5',
trigger: [
'group relative rounded-xs inline-flex items-center gap-1.5 text-muted hover:text-default text-sm focus-visible:ring-2 focus-visible:ring-primary focus:outline-none',
'transition-colors'
],
triggerIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
triggerLabel: 'truncate',
content: '*:first:mt-2.5 *:last:mb-0 *:my-1.5'
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
collapsible: {
slots: {
root: 'my-5',
trigger: [
'group relative rounded-xs inline-flex items-center gap-1.5 text-muted hover:text-default text-sm focus-visible:ring-2 focus-visible:ring-primary focus:outline-none',
'transition-colors'
],
triggerIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
triggerLabel: 'truncate',
content: '*:first:mt-2.5 *:last:mb-0 *:my-1.5'
}
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
collapsible: {
slots: {
root: 'my-5',
trigger: [
'group relative rounded-xs inline-flex items-center gap-1.5 text-muted hover:text-default text-sm focus-visible:ring-2 focus-visible:ring-primary focus:outline-none',
'transition-colors'
],
triggerIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
triggerLabel: 'truncate',
content: '*:first:mt-2.5 *:last:mb-0 *:my-1.5'
}
}
}
}
})
]
})
字段
在您的内容中显示的字段、属性或参数。
description
可以作为属性设置,或在默认插槽中以完整的 Markdown 支持设置。::field{name="name" type="string" required}
The `description` can be set as prop or in the default slot with full **markdown** support.
::
属性 | 默认值 | 类型 |
---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
name |
显示在触发器标签中的名称。 | |
type |
字段值的预期类型 | |
description |
字段描述 | |
required |
指示字段是否为必填项 | |
ui |
|
export default defineAppConfig({
uiPro: {
prose: {
field: {
slots: {
root: 'my-5',
container: 'flex items-center gap-3 font-mono text-sm',
name: 'font-semibold text-primary',
wrapper: 'flex-1 flex items-center gap-1.5 text-xs',
required: 'rounded-sm bg-error/10 text-error px-1.5 py-0.5',
type: 'rounded-sm bg-elevated text-toned px-1.5 py-0.5',
description: 'mt-3 text-muted text-sm [&_code]:text-xs/4'
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
field: {
slots: {
root: 'my-5',
container: 'flex items-center gap-3 font-mono text-sm',
name: 'font-semibold text-primary',
wrapper: 'flex-1 flex items-center gap-1.5 text-xs',
required: 'rounded-sm bg-error/10 text-error px-1.5 py-0.5',
type: 'rounded-sm bg-elevated text-toned px-1.5 py-0.5',
description: 'mt-3 text-muted text-sm [&_code]:text-xs/4'
}
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
field: {
slots: {
root: 'my-5',
container: 'flex items-center gap-3 font-mono text-sm',
name: 'font-semibold text-primary',
wrapper: 'flex-1 flex items-center gap-1.5 text-xs',
required: 'rounded-sm bg-error/10 text-error px-1.5 py-0.5',
type: 'rounded-sm bg-elevated text-toned px-1.5 py-0.5',
description: 'mt-3 text-muted text-sm [&_code]:text-xs/4'
}
}
}
}
})
]
})
字段组
将字段分组显示在列表中。
false
- 为您的项目启用分析功能(即将推出)。false
- 启用 Blob 存储,以存储图像、视频等静态资产。false
- 启用缓存存储,使用 Nitro 的 cachedEventHandler
和 cachedFunction
缓存您的服务器路由响应或函数。false
- 启用 SQL 数据库以存储应用程序数据。::field-group
::field{name="analytics" type="boolean"}
Default to `false` - Enables analytics for your project (coming soon).
::
::field{name="blob" type="boolean"}
Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
::
::field{name="cache" type="boolean"}
Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
::
::field{name="database" type="boolean"}
Default to `false` - Enables SQL database to store your application's data.
::
::
export default defineAppConfig({
uiPro: {
prose: {
fieldGroup: {
base: 'my-5 divide-y divide-default *:not-last:pb-5'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
fieldGroup: {
base: 'my-5 divide-y divide-default *:not-last:pb-5'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
fieldGroup: {
base: 'my-5 divide-y divide-default *:not-last:pb-5'
}
}
}
})
]
})
Icon
使用 icon
组件在您的内容中显示一个图标。
:icon{name="i-simple-icons-nuxtdotjs"}
属性 | 默认值 | 类型 |
---|---|---|
name |
|
export default defineAppConfig({
uiPro: {
prose: {
icon: {
base: 'size-4 shrink-0 align-sub'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
icon: {
base: 'size-4 shrink-0 align-sub'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
icon: {
base: 'size-4 shrink-0 align-sub'
}
}
}
})
]
})
Kbd
使用 kbd
组件在您的内容中显示一个键盘按键。
K
:kbd{value="meta"} :kbd{value="K"}
属性 | 默认值 | 类型 |
---|---|---|
value |
|
export default defineAppConfig({
uiPro: {
prose: {
kbd: {
base: 'align-text-top'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
kbd: {
base: 'align-text-top'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
kbd: {
base: 'align-text-top'
}
}
}
})
]
})
Tabs
使用 tabs
和 tabs-item
组件在您的内容中显示标签页。
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
::tabs
:::tabs-item{label="Code" icon="i-lucide-code"}
```mdc
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
```
:::
:::tabs-item{label="Preview" icon="i-lucide-eye"}
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
:::
::
属性 | 默认值 | 类型 |
---|---|---|
defaultValue |
|
默认选择的标签页。 |
sync |
将选定的标签页与本地存储键同步。 | |
hash |
选择标签页时要滚动到的哈希值。 | |
modelValue |
|
export default defineAppConfig({
uiPro: {
prose: {
tabs: {
slots: {
root: 'my-5 gap-4'
}
},
tabsItem: {
base: '*:first:mt-0 *:last:mb-0 *:my-1.5'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
tabs: {
slots: {
root: 'my-5 gap-4'
}
},
tabsItem: {
base: '*:first:mt-0 *:last:mb-0 *:my-1.5'
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
tabs: {
slots: {
root: 'my-5 gap-4'
}
},
tabsItem: {
base: '*:first:mt-0 *:last:mb-0 *:my-1.5'
}
}
}
})
]
})
步骤
使用 Steps 组件包裹您的标题,以显示步骤列表。
使用 level
属性定义哪些标题将用作步骤。
在您的 nuxt.config.ts
中添加 Nuxt UI Pro 模块
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
在您的 CSS 中导入 Tailwind CSS 和 Nuxt UI Pro
@import "tailwindcss";
@import "@nuxt/ui-pro";
::steps{level="4"}
#### Add the Nuxt UI Pro module in your `nuxt.config.ts`{lang="ts-type"}
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
```
#### Import Tailwind CSS and Nuxt UI Pro in your CSS
```css [assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
```
::
属性 | 默认值 | 类型 |
---|---|---|
level |
|
应用于步骤的标题级别。 |
export default defineAppConfig({
uiPro: {
prose: {
steps: {
base: 'ms-4 border-s border-default ps-8 [counter-reset:step]',
variants: {
level: {
'2': '[&>h2]:[counter-increment:step] [&>h2]:relative [&>h2]:before:absolute [&>h2]:before:size-8 [&>h2]:before:bg-elevated [&>h2]:before:rounded-full [&>h2]:before:font-semibold [&>h2]:before:text-sm [&>h2]:before:tabular-nums [&>h2]:before:inline-flex [&>h2]:before:items-center [&>h2]:before:justify-center [&>h2]:before:ring-4 [&>h2]:before:ring-bg [&>h2]:before:-ms-[48.5px] [&>h2]:before:-mt-0 [&>h2]:before:content-[counter(step)] [&>h2>a>span.absolute]:hidden',
'3': '[&>h3]:[counter-increment:step] [&>h3]:relative [&>h3]:before:absolute [&>h3]:before:size-7 [&>h3]:before:inset-x-0.5 [&>h3]:before:bg-elevated [&>h3]:before:rounded-full [&>h3]:before:font-semibold [&>h3]:before:text-sm [&>h3]:before:tabular-nums [&>h3]:before:inline-flex [&>h3]:before:items-center [&>h3]:before:justify-center [&>h3]:before:ring-4 [&>h3]:before:ring-bg [&>h3]:before:-ms-[48.5px] [&>h3]:before:content-[counter(step)] [&>h3>a>span.absolute]:hidden',
'4': '[&>h4]:[counter-increment:step] [&>h4]:relative [&>h4]:before:absolute [&>h4]:before:size-7 [&>h4]:before:inset-x-0.5 [&>h4]:before:bg-elevated [&>h4]:before:rounded-full [&>h4]:before:font-semibold [&>h4]:before:text-sm [&>h4]:before:tabular-nums [&>h4]:before:inline-flex [&>h4]:before:items-center [&>h4]:before:justify-center [&>h4]:before:ring-4 [&>h4]:before:ring-bg [&>h4]:before:-ms-[48.5px] [&>h4]:before:content-[counter(step)] [&>h4>a>span.absolute]:hidden'
}
},
defaultVariants: {
level: '3'
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
prose: {
steps: {
base: 'ms-4 border-s border-default ps-8 [counter-reset:step]',
variants: {
level: {
'2': '[&>h2]:[counter-increment:step] [&>h2]:relative [&>h2]:before:absolute [&>h2]:before:size-8 [&>h2]:before:bg-elevated [&>h2]:before:rounded-full [&>h2]:before:font-semibold [&>h2]:before:text-sm [&>h2]:before:tabular-nums [&>h2]:before:inline-flex [&>h2]:before:items-center [&>h2]:before:justify-center [&>h2]:before:ring-4 [&>h2]:before:ring-bg [&>h2]:before:-ms-[48.5px] [&>h2]:before:-mt-0 [&>h2]:before:content-[counter(step)] [&>h2>a>span.absolute]:hidden',
'3': '[&>h3]:[counter-increment:step] [&>h3]:relative [&>h3]:before:absolute [&>h3]:before:size-7 [&>h3]:before:inset-x-0.5 [&>h3]:before:bg-elevated [&>h3]:before:rounded-full [&>h3]:before:font-semibold [&>h3]:before:text-sm [&>h3]:before:tabular-nums [&>h3]:before:inline-flex [&>h3]:before:items-center [&>h3]:before:justify-center [&>h3]:before:ring-4 [&>h3]:before:ring-bg [&>h3]:before:-ms-[48.5px] [&>h3]:before:content-[counter(step)] [&>h3>a>span.absolute]:hidden',
'4': '[&>h4]:[counter-increment:step] [&>h4]:relative [&>h4]:before:absolute [&>h4]:before:size-7 [&>h4]:before:inset-x-0.5 [&>h4]:before:bg-elevated [&>h4]:before:rounded-full [&>h4]:before:font-semibold [&>h4]:before:text-sm [&>h4]:before:tabular-nums [&>h4]:before:inline-flex [&>h4]:before:items-center [&>h4]:before:justify-center [&>h4]:before:ring-4 [&>h4]:before:ring-bg [&>h4]:before:-ms-[48.5px] [&>h4]:before:content-[counter(step)] [&>h4>a>span.absolute]:hidden'
}
},
defaultVariants: {
level: '3'
}
}
}
}
})
]
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
prose: {
steps: {
base: 'ms-4 border-s border-default ps-8 [counter-reset:step]',
variants: {
level: {
'2': '[&>h2]:[counter-increment:step] [&>h2]:relative [&>h2]:before:absolute [&>h2]:before:size-8 [&>h2]:before:bg-elevated [&>h2]:before:rounded-full [&>h2]:before:font-semibold [&>h2]:before:text-sm [&>h2]:before:tabular-nums [&>h2]:before:inline-flex [&>h2]:before:items-center [&>h2]:before:justify-center [&>h2]:before:ring-4 [&>h2]:before:ring-bg [&>h2]:before:-ms-[48.5px] [&>h2]:before:-mt-0 [&>h2]:before:content-[counter(step)] [&>h2>a>span.absolute]:hidden',
'3': '[&>h3]:[counter-increment:step] [&>h3]:relative [&>h3]:before:absolute [&>h3]:before:size-7 [&>h3]:before:inset-x-0.5 [&>h3]:before:bg-elevated [&>h3]:before:rounded-full [&>h3]:before:font-semibold [&>h3]:before:text-sm [&>h3]:before:tabular-nums [&>h3]:before:inline-flex [&>h3]:before:items-center [&>h3]:before:justify-center [&>h3]:before:ring-4 [&>h3]:before:ring-bg [&>h3]:before:-ms-[48.5px] [&>h3]:before:content-[counter(step)] [&>h3>a>span.absolute]:hidden',
'4': '[&>h4]:[counter-increment:step] [&>h4]:relative [&>h4]:before:absolute [&>h4]:before:size-7 [&>h4]:before:inset-x-0.5 [&>h4]:before:bg-elevated [&>h4]:before:rounded-full [&>h4]:before:font-semibold [&>h4]:before:text-sm [&>h4]:before:tabular-nums [&>h4]:before:inline-flex [&>h4]:before:items-center [&>h4]:before:justify-center [&>h4]:before:ring-4 [&>h4]:before:ring-bg [&>h4]:before:-ms-[48.5px] [&>h4]:before:content-[counter(step)] [&>h4>a>span.absolute]:hidden'
}
},
defaultVariants: {
level: '3'
}
}
}
}
})
]
})