安装专业版

启动器演练场
了解如何在您的 Nuxt 应用程序中安装和配置 Nuxt UI Pro。

Nuxt UI Pro 是一系列基于 Nuxt UI 构建的 Vue 组件、可组合函数和工具，专注于结构和布局，旨在用作应用程序的构建块。

Nuxt UI 是免费开源的，而 Nuxt UI Pro 是一款高级产品，有助于维持 Nuxt OSS 的开发，请查看许可证部分了解更多信息。

设置

添加到 Nuxt 项目

安装 Nuxt UI Pro 包

pnpm add @nuxt/ui-pro
如果您正在使用 pnpm，请确保您在 .npmrc 文件中设置了shamefully-hoist=true在您的 .npmrc 文件中，或者在您项目的根目录中安装 tailwindcss。

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

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})
@nuxt/ui-pro 模块自动包含 @nuxt/ui 模块，因此您无需单独安装它。

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

@import "tailwindcss";
@import "@nuxt/ui-pro";
@nuxt/ui-pro CSS 文件包含 @nuxt/ui CSS 文件，因此您无需单独导入它。
建议为 VSCode 安装Tailwind CSS IntelliSense扩展并添加以下设置
.vscode/settings.json
{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.classAttributes": ["class", "ui"],
  "tailwindCSS.experimental.classRegex": [
    ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

用 App 组件包裹您的应用程序

app.vue
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
App 组件提供全局配置，是 Toast 和 Tooltip 组件正常工作所必需的。

从 Nuxt UI 升级

将 @nuxt/ui 包替换为 @nuxt/ui-pro

package.json
{
  "dependencies": {
-   "@nuxt/ui": "^3.0.0",
+   "@nuxt/ui-pro": "^3.0.0",
  }
}

将 @nuxt/ui 模块替换为 @nuxt/ui-pro

nuxt.config.ts
export default defineNuxtConfig({
- modules: ['@nuxt/ui'],
+ modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css']
})

将 @nuxt/ui CSS 导入替换为 @nuxt/ui-pro

assets/css/main.css
@import "tailwindcss";
- @import "@nuxt/ui";
+ @import "@nuxt/ui-pro";

使用官方模板

您可以从我们的极简入门模板或我们的官方模板之一开始

着陆页

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

文档

一个包含 Nuxt Content 的文档。

SaaS

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

仪表盘

一个多列布局的仪表盘。

聊天

一个集成了 Vercel AI SDK 的聊天应用程序。

作品集

一个拥有现代化设计的作品集网站。

您可以使用 GitHub 上的 Use this template 按钮创建新仓库或使用 CLI

npm create nuxt@latest -- -t github:nuxt-ui-pro/starter

选项

您可以通过在 nuxt.config.ts 中提供选项来自定义 Nuxt UI Pro。

许可证

使用 license 选项可以覆盖从 NUXT_UI_PRO_LICENSE 环境变量读取许可证密钥的默认行为。

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  uiPro: {
    license: process.env.MY_ENVIRONMENT_VARIABLE
  }
})
请勿将您的许可证密钥提交到公共仓库，以避免泄露。

mdc

使用 mdc 选项可以强制导入 Nuxt UI Pro 的 <Prose> 组件，即使没有安装 @nuxtjs/mdc 或 @nuxt/content。

  • 默认值: false
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  uiPro: {
    mdc: true
  }
})

内容

使用 content 选项可以强制导入 Nuxt UI Pro 的 <Prose> 和 <UContent> 组件，即使没有安装 @nuxt/content（@nuxtjs/mdc 会由 @nuxt/content 安装）。

  • 默认值: false
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  uiPro: {
    content: true
  }
})

前缀

使用 prefix 选项更改组件的前缀。

  • 默认值: U
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  ui: {
    prefix: 'Nuxt'
  }
})

字体

使用 fonts 选项来启用或禁用@nuxt/fonts模块。

  • 默认值: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  ui: {
    fonts: false
  }
})

颜色模式

使用 colorMode 选项来启用或禁用@nuxt/color-mode模块。

  • 默认值: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  ui: {
    colorMode: false
  }
})

theme.colors

使用 theme.colors 选项定义用于生成组件主题的动态颜色别名。

  • 默认值: ['primary', 'secondary', 'success', 'info', 'warning', 'error]
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      colors: ['primary', 'error']
    }
  }
})
在主题部分了解更多关于颜色定制和主题的信息。

theme.transitions

使用 theme.transitions 选项启用或禁用组件上的过渡。

  • 默认值: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      transitions: false
    }
  }
})
此选项会在具有悬停或激活状态的组件上添加 transition-colors 类。

theme.defaultVariants 新

使用 theme.defaultVariants 选项可以覆盖组件的默认 color 和 size 变体。

  • 默认值: { color: 'primary', size: 'md'}
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      defaultVariants: {
        color: 'neutral',
        size: 'sm'
      }
    }
  }
})

持续发布

Nuxt UI Pro 使用pkg.pr.new进行持续预览发布，为开发者提供即时访问最新功能和错误修复的能力，无需等待官方发布。

所有提交和对 v3 分支的 PR 都会自动创建预览版本。您可以通过将包版本替换为特定的提交哈希值或 PR 编号来使用它们。

package.json
{
  "dependencies": {
-   "@nuxt/ui-pro": "^3.0.0",
+   "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@fb69f59",
  }
}
pkg.pr.new 将自动在 PR 上评论安装 URL，方便测试更改。

介绍

Nuxt UI 结合了 Reka UI、Tailwind CSS 和 Tailwind Variants 的优势，为开发者提供了一套无与伦比的工具，用于创建复杂、易于访问且高性能的用户界面。

迁移

将您的应用程序从 Nuxt UI v2 迁移到 Nuxt UI v3 的综合指南。