安装^PRO

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

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

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

设置

添加到 Vue 项目

安装 Nuxt UI Pro 包

pnpm add @nuxt/ui-pro

yarn add @nuxt/ui-pro

npm install @nuxt/ui-pro

bun add @nuxt/ui-pro

如果您使用的是 pnpm，请确保您已设置shamefully-hoist=true在您的 .npmrc 文件中，或在您的项目根目录中安装 tailwindcss、vue-router 和 @unhead/vue。

在您的 `vite.config.ts` 中添加 Nuxt UI Pro Vite 插件

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

Nuxt UI 注册了 unplugin-auto-import 和 unplugin-vue-components，这将生成 auto-imports.d.ts 和 components.d.ts 类型声明文件。您可能希望将它们添加到 .gitignore 中，并添加到您的 tsconfig 中。

tsconfig.app.json

{
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
}

.gitignore

# Auto-generated type declarations
auto-imports.d.ts
components.d.ts

在您的 `main.ts` 中使用 Nuxt UI Vue 插件

main.ts

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)

app.mount('#app')

如果您使用的是Inertia.js，您可以跳过 vue-router 设置，因为 Inertia 提供了自己的路由系统。

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

assets/main.css

@import "tailwindcss";
@import "@nuxt/ui-pro";

在您的 main.ts 中导入 CSS 文件。

main.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)

app.mount('#app')

建议安装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>
    <RouterView />
  </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` vite 插件替换为 `@nuxt/ui-pro`

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
- import ui from '@nuxt/ui/vite'
+ import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
-   ui(),
+   uiPro()
  ]
})

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

assets/css/main.css

@import "tailwindcss";
- @import "@nuxt/ui";
+ @import "@nuxt/ui-pro";

使用官方模板

您可以使用我们的官方 Vue 模板开始

入门模板

一个为 Vue 设置了 Nuxt UI Pro 的极简入门模板。

仪表盘

一个具有多列布局的 Vue 仪表盘模板。

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

npx giget@latest gh:nuxt-ui-pro/starter-vue my-vue-starter

npx giget@latest gh:nuxt-ui-pro/dashboard-vue my-vue-dashboard

目录创建后，您可以使用 npm run dev 命令安装依赖并启动开发服务器。

选项

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

`prefix`

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

默认值: U

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({
      prefix: 'Nuxt'
    })
  ]
})

`ui`

使用 ui 选项为 Nuxt UI 提供配置。

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({
      ui: {
        colors: {
          primary: 'green',
          neutral: 'slate'
        }
      }
    })
  ]
})

`uiPro`

使用 uiPro 选项为 Nuxt UI Pro 提供配置。

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: {
        pageHero: {
          slots: {
            title: 'font-light'
          }
        }
      }
    })
  ]
})

`colorMode`

使用 colorMode 选项来启用或禁用来自 @vueuse/core 的颜色模式集成。

默认值: true

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({
      colorMode: false
    })
  ]
})

`theme.colors`

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

默认值: ['primary', 'secondary', 'success', 'info', 'warning', 'error]

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({
      theme: {
        colors: ['primary', 'error']
      }
    })
  ]
})

在主题部分了解更多关于颜色定制和主题的信息。

`theme.transitions`

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

默认值: true

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({
      theme: {
        transitions: false
      }
    })
  ]
})

此选项为具有 hover 或 active 状态的组件添加 transition-colors 类。

`inertia`

使用 inertia 选项启用对Inertia.js.

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({
      inertia: true
    })
  ]
})

Inertia.js

`的兼容性。使用此选项时，无需 vue-router，因为 Inertia.js 提供了自己的路由系统。通常使用 RouterLink 的组件将自动改用 Inertia 的 InertiaLink 组件。`

license

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({
      license: process.env.MY_ENVIRONMENT_VARIABLE
    })
  ]
})

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

请勿将您的许可证密钥提交到公共仓库，以避免暴露。

持续发布Nuxt UI Pro 使用pkg.pr.new

用于持续预览发布，让开发者无需等待正式发布即可即时访问最新功能和错误修复。

package.json

{
  "dependencies": {
-   "@nuxt/ui-pro": "^3.0.0",
+   "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@fb69f59",
  }
}

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

pkg.pr.new 将自动在 PR 上评论安装 URL，方便测试变更。

安装PRO

安装^PRO