Nuxt UI

Nuxt UI 融合了 Reka UI、Tailwind CSS 和 Tailwind Variants 的强大优势，为开发者提供了一套无与伦比的工具，助力打造精致、无障碍且高性能的用户界面。

文档

访问 https://ui.nuxt.com 查阅完整文档。

模板

使用我们现成的 Nuxt UI 模板快速启动项目，或参考安装指南。前往官方模板页面查看所有可用模板。

• Starter — 一个极简模板，帮助你快速上手 Nuxt UI。
• Landing — 基于 Nuxt Content 构建的现代化落地页模板。
• Docs — 基于 Nuxt Content 构建的文档模板。
• SaaS — 包含落地页、定价、文档和博客的 SaaS 模板，由 Nuxt Content 驱动。
• Dashboard — 支持多栏布局的数据仪表盘模板。
• Chat — 集成了 GitHub 身份验证和持久化聊天记录的 AI 聊天机器人模板，由 Vercel AI SDK 驱动。
• Portfolio — 时尚的作品集模板，用于展示你的项目、技能和博客，由 Nuxt Content 驱动。
• Changelog — 变更日志模板，用于展示来自 GitHub 的仓库发布说明，由 Nuxt MDC 驱动。
• Editor — 基于 TipTap 构建的富文本编辑器模板，支持 Markdown、HTML 和 JSON 内容格式。
• Calendar — 灵感源自 Apple 日历的模板，支持日、周、月视图，拖拽操作及乐观更新。

安装

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'],
  css: ['~/assets/css/main.css']
})

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 './assets/css/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')

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

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

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

参与贡献

感谢您考虑为 Nuxt UI 贡献代码。您可以通过以下几种方式参与：

• 报告 Bug：如果您遇到任何 Bug 或问题，请查阅报告 Bug 指南，了解如何提交 Bug 报告。
• 建议：您对改进 Nuxt UI 有任何想法吗？我们非常乐意倾听！请查看贡献指南分享您的建议。

本地开发

请参阅文档来搭建本地开发环境并参与贡献。

致谢

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

许可证

根据 MIT 许可证 授权。