安装

设置

1. 将 @nuxt/ui-pro 依赖项添加到您的项目中

pnpm i @nuxt/ui-pro

2. 扩展 @nuxt/ui-pro 层并在您的 nuxt.config 中注册 @nuxt/ui 模块

export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  modules: ['@nuxt/ui']
})

启动您的开发服务器，您现在应该能够使用 Nuxt UI Pro 中的所有组件、组合式函数和实用程序 🚀

许可证

Nuxt UI Pro 在开发中是免费的，但 **您需要许可证才能在生产环境中使用它**。

您可以选择 **个人**、**初创公司** 和 **组织** 计划，它们都提供相同的功能，并为您提供构建应用程序所需的许可证密钥。唯一的区别是可以邀请到私有 GitHub 存储库中的开发人员数量。

购买后，您将收到一封包含许可证密钥的电子邮件以供激活。访问 https://ui.nuxtjs.org.cn/pro/activate 使用您的 GitHub 用户名和许可证密钥激活您的许可证，您将被邀请到私有 GitHub 存储库。

本地

要在本地构建您的应用程序，您可以在您的 .env 文件中使用您的许可证密钥

NUXT_UI_PRO_LICENSE=<your-license-key>

如果您的机器上有多个项目，您也可以将其添加到您的 ~/.nuxtrc 中

uiPro.license=<your-token>

托管提供商

在 Netlify、Vercel、NuxtHub 或任何其他托管提供商上部署您的应用程序时，您需要将 NUXT_UI_PRO_LICENSE 环境变量设置为您的许可证密钥。此过程因提供商而异，但以下是在最常见提供商上的快速指南

• Netlify
• Vercel

TypeScript

此 Nuxt 层是用 TypeScript 编写的，并为其所有组件和组合式函数提供类型定义。

与 Nuxt UI 一样，您可以从 #ui-pro/types 中导入 Nuxt UI Pro 类型，这在定义包装组件时很有用

<template>
  <UHeader :links="links" />
</template>

<script setup lang="ts">
import type { HeaderLink } from '#ui-pro/types'

defineProps<{
  links: HeaderLink[]
}>()
</script>

选项

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

uiPro.license

如果您不想使用环境变量或 ~/.nuxtrc，您可以直接在您的 nuxt.config 中设置您的许可证密钥

export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  uiPro: {
    license: 'your-license'
  }
})

uiPro.content

Nuxt UI Pro 仅在您的项目中检测到模块时才会加载一些与 @nuxt/content 相关的组件、组合式函数和实用程序。如果您想以某种方式导入这些，您可以将 content 选项设置为 true

export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  uiPro: {
    content: true
  }
})

uiPro.routerOptions

Nuxt UI Pro 通过注入自定义 app/router.options.ts 来覆盖默认的 Nuxt 滚动行为。如果您想添加自己的，您需要将 routerOptions 选项设置为 false

export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  uiPro: {
    routerOptions: false
  }
})

uiPro.customScrollbars 新

Nuxt UI Pro 通过注入 scrollbars.css CSS 文件来覆盖 Windows 上的默认滚动条样式。如果您想禁用此行为，您需要将 customScrollbars 选项设置为 false

export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  uiPro: {
    customScrollbars: false
  }
})

Edge

要使用在 dev 分支上推送的最新更新，您可以使用 @nuxt/ui-pro-edge。

将您的 package.json 更新为以下内容

{
  "devDependencies": {
-   "@nuxt/ui-pro": "^0.3.1"
+   "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@latest"
  }
}

然后运行 pnpm install、yarn install 或 npm install。