排版专业版

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

用法

当使用 Nuxt UI Pro v3 搭配Nuxt Content v3时，您可以访问一套预设样式的散文组件。

当使用<ContentRenderer>组件时，您的 Markdown 内容将自动应用精美的排版和一致的间距。这包括标题、段落、列表、表格、代码块等——无需额外配置。

您可以按照 @nuxt/content 安装指南开始使用。

散文组件

散文组件是 @nuxtjs/mdc 模块引入的 HTML 排版标签的替代品，@nuxtjs/mdcNuxt UI Pro 会覆盖每个组件，以提供一致的外观和体验。

您可以在 Nuxt Content 文档中了解更多关于散文组件的信息。
您可以通过 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

h2

v3 有什么新功能？

## What's new in v3?

h3

Tailwind CSS v4

### Tailwind CSS v4

h4

安装 Nuxt UI

#### Install Nuxt UI

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.

a

Nuxt 文档

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

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.

strong

加粗文本

**Strong text**

em

强调文本

*Emphasized text*

ul

  • 我是一个列表项。
  • 我是另一个列表项。
  • 我是最后一个列表项。
- I'm a list item.
- I'm another list item.
- I'm the last list item.

ol

  1. 我是一个列表项。
  2. 我是另一个列表项。
  3. 我是最后一个列表项。
1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.

hr

---

table

属性默认值类型
namestring
尺寸中等尺寸string
colorneutralstring
| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |

img

![Nuxt Social Image](https://nuxtjs.org.cn/new-social.jpg)
如果@nuxt/image已安装，将使用 <NuxtImg> 组件而非原生 img 标签。
属性默认值类型
src

string

alt

string

width

string | number

height

string | number

zoom

true

boolean

点击图片放大

ui

{ base?: ClassNameValue; overlay?: ClassNameValue; content?: ClassNameValue; }

code

行内代码

`inline code`

您可以使用 color 属性指定代码块的颜色。默认为 neutral。

行内代码

`inline code`{color="error"}

您可以使用 lang 属性指定代码块的语言。

nuxt.config.ts

`nuxt.config.ts`{lang="ts-type"}
属性默认值类型
lang

string

color

'neutral'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "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']
})
```

编写代码块时，您可以指定一个文件名，该文件将显示在代码块顶部。将根据扩展名或名称自动显示一个图标。

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})
```
默认情况下已经定义了一些图标，但您可以通过 app.config.ts 中的 uiPro.prose.codeIcon 键添加更多图标。
app.config.ts
export default defineAppConfig({
  uiPro: {
    prose: {
      codeIcon: {
        terminal: 'i-ph-terminal-window-duotone'
      }
    }
  }
})

每个代码块都有一个内置的复制按钮，可以将代码复制到剪贴板。

您可以在 app.config.ts 中通过 ui.icons.copy 和 ui.icons.copyCheck 键更改图标。
app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check'
    }
  }
})
属性默认值类型
图标

string

code

string

language

string

filename

string

highlights

number[]

hideHeader

boolean

meta

string

ui

{ root?: ClassNameValue; header?: ClassNameValue; filename?: ClassNameValue; icon?: ClassNameValue; copy?: ClassNameValue; base?: ClassNameValue; }

Vue 组件

Nuxt UI Pro 还提供了一套 Vue 组件，帮助您使用MDC 语法.

Accordion

使用 accordion 和 accordion-item 组件在您的内容中显示一个手风琴。

::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

'multiple'

"multiple" | "single"

Badge

在 badge 组件的默认插槽中使用 Markdown 来显示内容中的徽章。

v3.0.0
::badge
**v3.0.0**
::

标注

在 callout 组件的默认插槽中使用 Markdown，为您的内容添加引人注目的上下文。

使用 icon 和 color 属性来自定义。您还可以传递来自<NuxtLink>组件的任何属性。

了解如何在您的项目中安装 @nuxt/ui-pro。
::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>.

创业版

最适合小型团队、初创公司和最多 5 名开发人员的机构。
::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 组件，将它们分组显示在网格布局中。

Dashboard

具有多列布局的仪表盘。

SaaS

一个包含着陆页、定价、文档和博客的模板。

文档

一个带有 @nuxt/content 的文档。

着陆页

一个您可以作为起点的着陆页。

::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.
::

::
app.config.ts
export default defineAppConfig({
  uiPro: {
    prose: {
      cardGroup: {
        base: 'grid grid-cols-1 sm:grid-cols-2 gap-5 my-5 *:my-0'
      }
    }
  }
})
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({
      uiPro: {
        prose: {
          cardGroup: {
            base: 'grid grid-cols-1 sm:grid-cols-2 gap-5 my-5 *:my-0'
          }
        }
      }
    })
  ]
})
vite.config.ts
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 组件包裹您的代码块，以显示可折叠的代码块。

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;
}

::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;
}
```

::
属性默认值类型
图标

appConfig.ui.icons.chevronDown

string

用于切换代码显示的图标。

name

t('prose.codeCollapse.name')

string

显示在触发器标签中的名称。

openText

t('prose.codeCollapse.openText')

string

代码折叠时显示的文本。

closeText

t('prose.codeCollapse.closeText')

string

代码展开时显示的文本。

open

boolean

ui

{ root?: ClassNameValue; footer?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; }

CodeGroup

使用 code-group 组件包裹您的代码块，将它们分组显示在标签页中。

pnpm 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
```

::
与 ProsePre 组件类似，CodeGroup 处理文件名、图标和复制按钮。
属性默认值类型
defaultValue

'0'

string

默认选择的标签页。

sync

string

将选定的标签页与本地存储键同步。

modelValue

string

ui

{ root?: ClassNameValue; list?: ClassNameValue; indicator?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; triggerLabel?: ClassNameValue; }

CodePreview

使用 code-preview 组件包裹代码块，以使用 code 插槽显示 MDC 组件的预览及其代码。

行内代码

`inline code`

::code-preview
`inline code`

#code
```mdc
`inline code`
```
::
属性默认值类型
ui

{ root?: ClassNameValue; preview?: ClassNameValue; code?: ClassNameValue; }

CodeTree

使用 code-tree 组件按特定顺序包裹您的代码块，以显示文件树视图。

app/app.config.ts
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.
````

::
与 ProsePre 组件类似，CodeTree 处理文件名、图标和复制按钮。
属性默认值类型
defaultValue

string

默认选择的标签页。

expandAll

false

boolean

默认展开所有目录。

ui

{ root?: ClassNameValue; list?: ClassNameValue; item?: ClassNameValue; listWithChildren?: ClassNameValue; itemWithChildren?: ClassNameValue; link?: ClassNameValue; linkLeadingIcon?: ClassNameValue; linkLabel?: ClassNameValue; linkTrailing?: ClassNameValue; linkTrailingIcon?: ClassNameValue; content?: ClassNameValue; }

Collapsible

使用 collapsible 组件包裹您的内容，以在内容中显示一个可折叠区域。

::collapsible

| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |

::
属性默认值类型
图标

appConfig.ui.icons.chevronDown

string

用于切换代码显示的图标。

name

t('prose.collapsible.name')

string

显示在触发器标签中的名称。

openText

t('prose.collapsible.openText')

string

代码折叠时显示的文本。

closeText

t('prose.collapsible.closeText')

string

代码展开时显示的文本。

ui

{ root?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; triggerLabel?: ClassNameValue; content?: ClassNameValue; }

字段

在您的内容中显示的字段、属性或参数。

name
string required
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

'div'

any

此组件应渲染为的元素或组件。

name

string

显示在触发器标签中的名称。

type

string

字段值的预期类型

description

string

字段描述

required

boolean

指示字段是否为必填项

ui

{ root?: ClassNameValue; container?: ClassNameValue; name?: ClassNameValue; wrapper?: ClassNameValue; required?: ClassNameValue; type?: ClassNameValue; description?: ClassNameValue; }

字段组

将字段分组显示在列表中。

analytics
boolean
默认为 false - 为您的项目启用分析功能（即将推出）。
blob
boolean
默认为 false - 启用 Blob 存储，以存储图像、视频等静态资产。
cache
boolean
默认为 false - 启用缓存存储，使用 Nitro 的 cachedEventHandler 和 cachedFunction 缓存您的服务器路由响应或函数。
database
boolean
默认为 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.
  ::
::
app.config.ts
export default defineAppConfig({
  uiPro: {
    prose: {
      fieldGroup: {
        base: 'my-5 divide-y divide-default *:not-last:pb-5'
      }
    }
  }
})
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({
      uiPro: {
        prose: {
          fieldGroup: {
            base: 'my-5 divide-y divide-default *:not-last:pb-5'
          }
        }
      }
    })
  ]
})
vite.config.ts
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

string

Kbd

使用 kbd 组件在您的内容中显示一个键盘按键。

K

:kbd{value="meta"} :kbd{value="K"}
属性默认值类型
value

string

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

'0'

string

默认选择的标签页。

sync

string

将选定的标签页与本地存储键同步。

hash

string

选择标签页时要滚动到的哈希值。

modelValue

string

步骤

使用 Steps 组件包裹您的标题，以显示步骤列表。

使用 level 属性定义哪些标题将用作步骤。

在您的 nuxt.config.ts 中添加 Nuxt UI Pro 模块

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})

在您的 CSS 中导入 Tailwind CSS 和 Nuxt UI Pro

assets/css/main.css
@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

'3'

"3" | "2" | "4"

应用于步骤的标题级别。

内容

Nuxt UI Pro 使用精美的组件和样式增强了 Nuxt Content。

defineShortcuts

一个在您的应用程序中定义键盘快捷键的可组合项。