vue dash

VueDash (Templat Dasbor Admin CSS Vue Nuxt.js 3 Tailwind)

Templat dasbor admin yang modern, responsif, dan dapat disesuaikan, dibuat dengan Vue.js , Nuxt.js 3 , NuxtUI , dan Tailwind CSS . Templat ini sempurna untuk membangun antarmuka admin, dasbor, dan aplikasi web yang kuat dengan desain yang bersih dan minimal.

Fitur

• Nuxt.js 3 : Render sisi server (SSR) yang mulus dan pembuatan situs statis (SSG) dengan API komposisi Vue 3.
• Tailwind CSS : Kerangka kerja CSS yang mengutamakan utilitas untuk pengembangan UI yang cepat dan responsif.
• Manajemen Daftar Todo : Dukungan bawaan untuk manajemen daftar tugas CRUD
• Pembuat Faktur : Dukungan bawaan untuk CRUD, pembuat Faktur interaktif
• Komponen yang Dapat Digunakan Kembali : Komponen UI modular dan dapat digunakan kembali untuk penyesuaian yang mudah.
• Mode Gelap : Dukungan bawaan untuk tema terang dan gelap.
• Desain Responsif : Dioptimalkan sepenuhnya untuk semua ukuran layar.
• Perutean Dinamis : Sistem perutean fleksibel yang didukung oleh Nuxt.js.
• Dapat Diperpanjang : Mudah untuk menambahkan halaman, komponen, dan plugin baru.

? Tumpukan Teknologi

• Kerangka Frontend : Vue.js 3 (API Komposisi)
• Kerangka Meta : Nuxt.js 3
• Gaya : CSS Tailwind
• Perpustakaan Komponen UI : NextUI
• Manajer Paket : pnpm

Instalasi

1. Kloning repositori :

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

2. Instal dependensi :

   pnpm install
   # or
   npm install

3. Jalankan server pengembangan :

   pnpm run dev
   # or
   npm run dev

4. Buka browser Anda dan navigasikan ke http://localhost:3000 .

---

Struktur Berkas

 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

? Dokumentasi Rute dan Halaman

Rute	Nama Halaman	Keterangan
/	Halaman Utama	Halaman arahan utama dasbor admin.
/login	Halaman Masuk	Memungkinkan pengguna masuk untuk mengakses dasbor admin.
/register	Halaman Daftar	Memungkinkan pengguna baru untuk membuat akun.
/contact	Halaman Kontak	Menampilkan formulir bagi pengguna untuk menghubungi dukungan atau pertanyaan.
/invoice	Halaman Faktur	Menampilkan daftar faktur atau rincian catatan keuangan.
/todo	Halaman Aplikasi Todo	Halaman untuk mengelola dan melacak tugas dalam format daftar tugas.
/products	Halaman Produk	Halaman untuk mengelola informasi produk, termasuk detail dan harga.
/order-lists	Halaman Daftar Pesanan	Mencantumkan semua pesanan pelanggan dengan opsi untuk melihat dan mengelolanya.
/product-stock	Halaman Stok Produk	Menampilkan tingkat stok saat ini dan opsi manajemen inventaris.
/settings	Halaman Pengaturan	Memungkinkan pengguna untuk mengelola pengaturan sistem dan preferensi pribadi.
/team	Halaman Tim	Menampilkan anggota tim, peran, dan opsi manajemen izin.

? Kustomisasi

CSS penarik

Ubah file tailwind.config.js untuk menyesuaikan tema, memperluas gaya, atau menambahkan plugin.

Komponen

Semua komponen ada di direktori components/ di dalam direktori features/(domain)/ . Buat komponen baru atau perluas komponen yang sudah ada agar sesuai dengan kebutuhan proyek Anda.

Halaman dan Perutean

Tambahkan atau edit file di direktori pages/ untuk membuat rute baru secara dinamis.

? Ketergantungan

• Gambar 3
• Nuxt.js 3
• CSS penarik
• NuxtUI

Dokumentasi

Menyiapkan Otentikasi

Anda dapat mengintegrasikan layanan autentikasi apa pun (misalnya, Firebase, Auth0, atau JWT khusus) menggunakan middleware dan plugin Nuxt. Lihat modul autentikasi Nuxt.js untuk detail selengkapnya.

Menambahkan Integrasi API

Gunakan rute server Nuxt atau panggilan API eksternal di direktori pages/ atau composables/ . Pelajari lebih lanjut tentang penanganan API Nuxt.js di sini.

? Pengujian

Pengujian Satuan

Instal dan konfigurasikan Vitest untuk unit yang menguji komponen Vue Anda.

Pengujian Ujung-ke-Ujung

Gunakan Cypress atau Playwright untuk pengujian ujung ke ujung.

Penyebaran

1. Pembuatan Situs Statis (SSG) :

   pnpm run generate

   Sebarkan file yang dihasilkan dari folder dist/ ke penyedia hosting statis (misalnya, Netlify, Vercel).

2. Rendering Sisi Server (SSR) :

   pnpm run build
   pnpm run start

   Terapkan aplikasi ke hosting Node.js (misalnya, AWS, Heroku, atau DigitalOcean).

? Mendukung

Jika Anda mengalami masalah, memiliki pertanyaan, atau ingin meminta fitur atau halaman baru, jangan ragu untuk membuka masalah atau menghubungi [email protected].

? Kontribusi

Kontribusi dipersilahkan! Silakan ikuti langkah-langkah berikut:

1. Cabangkan repositori.
2. Buat cabang fitur ( git checkout -b feature-name ).
3. Komit perubahan Anda ( git commit -m "Add feature" ).
4. Dorong ke cabang ( git push origin feature-name ).
5. Buka permintaan tarik.

Lisensi

Proyek ini dilisensikan di bawah Lisensi MIT.

? Ucapan Terima Kasih

• Vue.js
• Nuxt.js
• NuxtUI
• CSS penarik

Pratinjau Halaman

Tampilan Desktop

Tampilan Tablet

Tampilan Seluler