ui
@nuxt/ui

Reka UIとTailwind CSSを搭載した直感的なUIライブラリ。
556.2K ダウンロード5.6K スターv4.0.1
benjamincanacbenjamincanac
AtinuxAtinux
Nuxt UI

Nuxt UI

npm versionnpm downloadsLicenseNuxt

Nuxt UI は、Reka UI、Tailwind CSS、およびTailwind Variants の力を結集し、開発者に洗練された、アクセシブルで高性能なユーザーインターフェースを作成するための比類のないツールセットを提供します。

!NOTE 現在 v4 ブランチにいます。Nuxt UI v3 の場合は v3 ブランチを、Nuxt UI v2 の場合は v2 ブランチをご覧ください。

ドキュメント

ドキュメントは https://ui.nuxt.com でご覧いただけます。

テンプレート

すぐに使える Nuxt UI テンプレートのいずれかを使用してプロジェクトを開始するか、インストールガイドに従ってください。公式テンプレートページで利用可能なすべてのテンプレートをご覧ください。

  • Starter — Nuxt UI を始めるための最小限のテンプレート。
  • Landing — Nuxt Content を利用したモダンなランディングページテンプレート。
  • Docs — Nuxt Content を利用したドキュメントテンプレート。
  • SaaS — Nuxt Content を利用したランディング、価格設定、ドキュメント、ブログを備えた SaaS テンプレート。
  • Dashboard — 複数列レイアウトのダッシュボードテンプレート。
  • Chat — GitHub 認証と永続的なチャット履歴を備え、Vercel AI SDK を利用した AI チャットボットテンプレート。
  • Portfolio — Nuxt Content を利用してあなたの作品、スキル、ブログを紹介する洗練されたポートフォリオテンプレート。
  • Changelog — Nuxt MDC を利用して GitHub からリポジトリのリリースノートを表示するチェンジログテンプレート。

インストール

pnpm
pnpm add @nuxt/ui
yarn
yarn add @nuxt/ui
npm
npm install @nuxt/ui
bun
bun add @nuxt/ui

Nuxt

  1. nuxt.config.ts に Nuxt UI モジュールを追加します。
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
  1. CSS に Tailwind CSS と Nuxt UI をインポートします。
assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

詳細については、インストールガイドをご覧ください。

Vue

  1. vite.config.ts に Nuxt UI Vite プラグインを追加します。
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui()
  ]
})
  1. 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')
  1. CSS に Tailwind CSS と Nuxt UI をインポートします。
assets/main.css
@import "tailwindcss";
@import "@nuxt/ui";

詳細については、インストールガイドをご覧ください。

貢献

Nuxt UI への貢献をご検討いただきありがとうございます。貢献する方法はいくつかあります。

  • バグの報告: バグや問題に遭遇した場合は、バグ報告ガイドを参照してバグ報告の提出方法を学んでください。
  • 提案: Nuxt UI を改善するためのアイデアはありますか？ぜひお聞かせください！貢献ガイドを参照して提案を共有してください。

ローカル開発

ドキュメントに従ってローカル開発環境をセットアップし、貢献してください。

クレジット

ライセンス

MIT ライセンスの下でライセンスされています。