安装PRO

在线示例
了解如何在 Nuxt 应用中安装和配置 Nuxt UI Pro。

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

Nuxt UI 是免费开源的，而 Nuxt UI Pro 是一个付费产品，有助于支持 Nuxt 开源软件的开发，请查看 许可证 部分了解更多信息。

设置

添加到 Nuxt 项目

安装 Nuxt UI Pro 包

pnpm add @nuxt/ui-pro
如果您使用 pnpm，请确保您设置了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 文件，因此您无需单独导入它。
建议安装Tailwind CSS IntelliSenseVSCode 扩展并添加以下设置
.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

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

仪表盘

一个带有多列布局的仪表盘。

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

npx nuxi init -t github:nuxt-ui-pro/starter my-starter

选项

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

license

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

即使未安装 @nuxtjs/mdc 或 @nuxt/content，也可以使用 mdc 选项强制导入 MDC 组件。

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

content

即使未安装 @nuxt/content，也可以使用 content 选项强制导入内容组件。

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

prefix

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

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

fonts

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

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

colorMode

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

持续发布

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 的全面指南。