use-bootstrapへようこそ！👋😁

ドキュメント 📗

公式サイト こちら を参照することをお勧めします。公式サイトには、実際に動作するドキュメントと実装例が掲載されています。

ja:こちらの公式サイトを閲覧することをお勧めします。公式サイトでは実際に動作するドキュメントや実装例を掲載しています。(日本語対応してます ✨)

インストール 🔧

Bootstrap5とuse-bootstrap NPMパッケージのインストール

npx nuxi@latest module add usebootstrap

nuxt.config.jsにusebootstrapセクションを追加します。

export default defineNuxtConfig({
  modules: [
    'usebootstrap'
    ],
})

コンセプト 🎤

use-bootstrapは、Nuxt3とBootstrap5をベースとしたフロントエンドフレームワークです。

• 拡張されたBootstrap5 SCSS
• ピュアVue.jsスクリプト
• UnoCSS、nuxt-link、nuxt-image、nuxt-iconなどをサポート…
• UIとデータのシームレスな統合
• 統一されたカラー管理
• 静的フラグメントジェネレーター

コンポーネント

• アコーディオン
• アラート
• バッジ
• ブレッドクラム
• ボタン
• ボタングループ
• カード
• カルーセル
• クローズボタン
• コラップス
• ドロップダウン
• リストグループ
• モーダル
• ナビバー
• ナビとタブ
• オフキャンバス
• ページネーション
• プレースホルダー
• ポップオーバー
• プログレスバー
• スクロールスパイ
• スピナー
• トースト
• ツールチップ
• レンジ

モジュール

• VueUse
• アイコン
• フォント
• Animate.css
• サイトマップ
• robots.txt
• UnoCSS
• Leafletマップ
• マークダウン

コンポーネント拡張

• グリッドテンプレート
• カラーモード
• ローカリゼーション
• サイドバー
• 目次 (Toc)
• コードハイライター
• イントロ
• Typed.js
• Swiper
• 区切り線
• ステータスインジケーター
• アイコンボックス
• アバター
• Intersection Observerによるアニメーション
• ページトップへ戻る
• レスポンシブ区切り線
• JSONビューワー
• パスワード強度チェック
• Tiptapエディター
• ソート可能なリスト

統合コンポーネント

• ViewState
• ActionState

詳細については、こちらをクリックしてください。

ライセンス 📄

MITライセンスの下でリリースされたコードです。

メンバー 👾

• ✨KoujiSano✨
• ITpassport
• Siguretuki
• yukikimoto
• Iris-Fla