Nuxt UI

Nuxt UI 結合了 Reka UI、Tailwind CSS 和 Tailwind Variants 的強大功能，為開發者提供了一套無與倫比的工具，用於建立複雜、可訪問且高效能的使用者介面。

!注意 您當前在 v4 分支，請檢視 v3 分支 獲取 Nuxt UI v3 或 v2 分支 獲取 Nuxt UI v2。

文件

訪問 https://ui.nuxt.com 探索文件。

模板

使用我們現成的 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 倉庫的釋出說明。

安裝

pnpm add @nuxt/ui

yarn add @nuxt/ui

npm install @nuxt/ui

bun add @nuxt/ui

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 做出貢獻。您可以透過以下幾種方式參與：

• 報告錯誤：如果您遇到任何錯誤或問題，請查閱報告錯誤指南，瞭解如何提交錯誤報告。
• 建議：對增強 Nuxt UI 有任何想法嗎？我們很樂意傾聽！請查閱貢獻指南分享您的建議。

本地開發

請遵循文件設定您的本地開發環境並做出貢獻。

鳴謝

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

許可證

根據 MIT 許可證授權。