Nuxt UI

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

!注意 您当前位于 v4 分支。如需 Nuxt UI v3，请查看 v3 分支；如需 Nuxt UI v2，请查看 v2 分支。

文档

访问 https://ui.nuxtjs.org.cn 以探索文档。

模板

使用我们开箱即用的 Nuxt UI 模板启动您的项目，或者按照安装指南操作。在官方模板页面探索所有可用模板。

• Starter — 一个使用 Nuxt UI 的极简入门模板。
• Landing — 一个由 Nuxt Content 驱动的现代化落地页模板。
• Docs — 一个由 Nuxt Content 驱动的文档模板。
• SaaS — 一个包含落地页、定价页、文档和博客的 SaaS 模板，由 Nuxt Content 驱动。
• Dashboard — 一个带有多列布局的仪表盘模板。
• Chat — 一个由 Vercel AI SDK 驱动的 AI 聊天机器人模板，支持 GitHub 认证和持久化聊天记录。
• Portfolio — 一个由 Nuxt Content 驱动的精美个人作品集模板，用于展示您的工作、技能和博客。
• Changelog — 一个由 Nuxt MDC 驱动的更新日志模板，用于显示 GitHub 仓库的发布说明。
• Editor — 一个由 TipTap 驱动的富文本编辑器模板，支持 Markdown、HTML 和 JSON 内容类型。

安装

pnpm add @nuxt/ui tailwindcss

yarn add @nuxt/ui tailwindcss

npm install @nuxt/ui tailwindcss

bun add @nuxt/ui tailwindcss

Nuxt

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

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

2. 在您的 CSS 中导入 Tailwind CSS 和 Nuxt UI

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

在安装指南中了解更多信息。

Vue

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

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

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

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

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

3. 在您的 CSS 中导入 Tailwind CSS 和 Nuxt UI

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

在安装指南中了解更多信息。

贡献

感谢您考虑为 Nuxt UI 做出贡献。以下是您可以参与的几种方式

• 报告 Bug：如果您遇到任何 bug 或问题，请查阅报告 bug 指南，了解如何提交 bug 报告。
• 建议：对增强 Nuxt UI 有什么想法吗？我们非常期待您的反馈！请查阅贡献指南来分享您的建议。

!提示 我们为 AI 助手提供了一个贡献技能 (contributing skill)，旨在帮助您参与 Nuxt UI 开发。当您在该仓库中工作时，它会自动引导您了解组件结构、主题模式、测试约定和文档指南。

本地开发

遵循文档以设置您的本地开发环境并参与贡献。

鸣谢

• nuxt/nuxt
• nuxt/icon
• nuxt/fonts
• nuxt-modules/color-mode
• unovue/reka-ui
• tailwindlabs/tailwindcss
• vueuse/vueuse

许可证

采用 MIT 许可证。