排版专业版

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

用法

当将 Nuxt UI Pro v3 与Nuxt Content v3结合使用时，您将获得一套预设样式的散文组件。

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

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

散文组件

散文组件是替换由@nuxtjs/mdc模块引入的 HTML 排版标签的组件，Nuxt 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
sizemdstring
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

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

string

alt

string

width

string | number

height

string | number

code

行内代码

`inline code`

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

行内代码

`inline code`{color="error"}

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

nuxt.config.ts

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

'neutral'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

lang

string

pre

代码块由 @nuxtjs/mdc 模块的 ProsePre 组件渲染，并且代码高亮由底层实现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'
    }
  }
})
属性默认值类型
icon

string

code

string

filename

string

language

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

卡片组

使用 card-group 组件包裹您的 card 组件，将它们分组到网格布局中。

仪表盘

一个多列布局的仪表盘。

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'
      }
    }
  }
})
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'
          }
        }
      }
    })
  ]
})
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'
          }
        }
      }
    })
  ]
})

代码折叠面板

使用 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;
}
```

::
属性默认值类型
name

'code'

string

openText

'展开'

string

closeText

'折叠'

string

icon

appConfig.ui.icons.chevronDown

string

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

open

boolean

ui

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

代码组

使用 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

modelValue

string

sync

string

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

ui

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

代码预览

使用 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'],

  future: {
    compatibilityVersion: 4
  },

  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.0"
  }
}
```

```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 `http://localhost: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; ... 5 more ...; 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"} |

::
属性默认值类型
name

'properties'

string

openText

'Show'

string

closeText

'Hide'

string

icon

appConfig.ui.icons.chevronDown

string

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

ui

{ base?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; triggerLabel?: ClassNameValue; }

字段

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

name
string 必需

description 可以作为 prop 设置，或在默认插槽中设置，支持完整的 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

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

type

string

字段值的预期类型

name

string

字段的名称。

required

boolean

指示字段是否为必需。

description

string

字段的描述

ui

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

字段组

将字段组织成列表。

analytics
boolean

默认为 false - 为你的项目启用 analytics 功能（即将推出）。

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

modelValue

string

sync

string

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

hash

string

选择选项卡时滚动的哈希值。

步骤

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

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

在你的 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

一个用于在你的应用中定义键盘快捷键的 composable。