vue dash

VueDash (Vue Nuxt.js 3 Tailwind CSS 管理ダッシュボード テンプレート)

Vue.js 、 Nuxt.js 3 、 NuxtUI 、およびTailwind CSSで構築された、最新の応答性の高いカスタマイズ可能な管理ダッシュボード テンプレート。このテンプレートは、クリーンで最小限のデザインで強力な管理インターフェイス、ダッシュボード、Web アプリケーションを構築するのに最適です。

特徴

• Nuxt.js 3 : Vue 3 構成 API を使用したシームレスなサーバーサイド レンダリング (SSR) と静的サイト生成 (SSG)。
• Tailwind CSS : 高速で応答性の高い UI 開発のためのユーティリティファーストの CSS フレームワーク。
• Todo リスト管理: CRUD todo リスト管理の組み込みサポート
• 請求書メーカー: CRUD の組み込みサポート、インタラクティブな請求書メーカー
• 再利用可能なコンポーネント: 簡単にカスタマイズできるモジュール式の再利用可能な UI コンポーネント。
• ダーク モード: 明るいテーマと暗いテーマの組み込みサポート。
• レスポンシブ デザイン: すべての画面サイズに完全に最適化されています。
• 動的ルーティング: Nuxt.js を利用した柔軟なルーティング システム。
• 拡張可能: 新しいページ、コンポーネント、プラグインを簡単に追加できます。

?技術スタック

• フロントエンドフレームワーク: Vue.js 3 (Composition API)
• メタフレームワーク: Nuxt.js 3
• スタイリング: Tailwind CSS
• UIコンポーネントライブラリ：NextUI
• パッケージマネージャー:pnpm

インストール

1. リポジトリのクローンを作成します。

   git clone https://github.com/Kei-K23/vue-dash
   cd vue-dash

2. 依存関係をインストールします。

   pnpm install
   # or
   npm install

3. 開発サーバーを実行します。

   pnpm run dev
   # or
   npm run dev

4. ブラウザを開いてhttp://localhost:3000に移動します。

---

ファイル構造

 admin-dashboard-template/
├── layouts/           # Layouts for the app
├── pages/             # Nuxt.js pages and routes
├── features/          # Organize logic, ui components and state into domain or feature
├── public/            # Static assets
├── nuxt.config.ts     # Nuxt.js configuration
└── tailwind.config.js # Tailwind CSS configuration

?ルートとページのドキュメント

ルート	ページ名	説明
/	メインページ	管理者ダッシュボードの主要なランディング ページ。
/login	ログインページ	ユーザーがログインして管理ダッシュボードにアクセスできるようにします。
/register	登録ページ	新しいユーザーがアカウントを作成できるようにします。
/contact	お問い合わせページ	ユーザーがサポートまたは問い合わせをするためのフォームを表示します。
/invoice	請求書ページ	請求書のリストまたは財務記録の詳細を表示します。
/todo	Todo アプリページ	Todo リスト形式でタスクを管理および追跡するためのページ。
/products	製品ページ	詳細や価格などの製品情報を管理するページです。
/order-lists	注文リストページ	すべての顧客注文を表示および管理するオプションとともにリストします。
/product-stock	商品在庫ページ	現在の在庫レベルと在庫管理オプションを表示します。
/settings	設定ページ	ユーザーがシステム設定と個人設定を管理できるようにします。
/team	チームページ	チームメンバー、役割、権限管理オプションを紹介します。

?カスタマイズ

追い風 CSS

tailwind.config.jsファイルを変更して、テーマをカスタマイズしたり、スタイルを拡張したり、プラグインを追加したりします。

コンポーネント

すべてのコンポーネントは、 features/(domain)/ディレクトリ内のcomponents/ディレクトリにあります。プロジェクトのニーズに合わせて、新しいコンポーネントを作成するか、既存のコンポーネントを拡張します。

ページとルーティング

新しいルートを動的に作成するには、 pages/ディレクトリ内のファイルを追加または編集します。

?依存関係

• Vue3
• Nuxt.js 3
• 追い風 CSS
• NuxtUI

ドキュメント

認証の設定

Nuxt のミドルウェアとプラグインを使用して、任意の認証サービス (Firebase、Auth0、カスタム JWT など) を統合できます。詳細については、Nuxt.js 認証モジュールを参照してください。

API統合の追加

Nuxt のサーバー ルートまたは外部 API 呼び出しを、 pages/またはcomposables/ディレクトリで使用します。 Nuxt.js API の処理の詳細については、こちらをご覧ください。

?テスト

単体テスト

Vue コンポーネントの単体テスト用に Vitest をインストールして構成します。

エンドツーエンドのテスト

エンドツーエンドのテストには Cypress または Playwright を使用します。

導入

1. 静的サイト生成 (SSG) :

   pnpm run generate

   生成されたファイルをdist/フォルダーから静的ホスティング プロバイダー (Netlify、Vercel など) にデプロイします。

2. サーバーサイド レンダリング (SSR) :

   pnpm run build
   pnpm run start

   アプリケーションを Node.js ホスティング (AWS、Heraku、DigitalOcean など) にデプロイします。

?サポート

問題が発生したり、質問がある場合、または新しい機能やページをリクエストしたい場合は、お気軽に問題を開くか、[email protected] までご連絡ください。

?貢献

貢献は大歓迎です!次の手順に従ってください。

1. リポジトリをフォークします。
2. 機能ブランチを作成します ( git checkout -b feature-name )。
3. 変更をコミットします ( git commit -m "Add feature" )。
4. ブランチにプッシュします ( git push origin feature-name )。
5. プルリクエストを開きます。

ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています。

?謝辞

• Vue.js
• Nuxt.js
• NuxtUI
• 追い風 CSS

ページのプレビュー

デスクトップビュー

タブレットビュー

モバイルビュー