vue dash

VueDash (modèle de tableau de bord d'administration CSS Vue Nuxt.js 3 Tailwind)

Un modèle de tableau de bord d'administration moderne, réactif et personnalisable construit avec Vue.js , Nuxt.js 3 , NuxtUI et Tailwind CSS . Ce modèle est parfait pour créer des interfaces d'administration, des tableaux de bord et des applications Web puissantes avec un design épuré et minimal.

Caractéristiques

• Nuxt.js 3 : Rendu transparent côté serveur (SSR) et génération de sites statiques (SSG) avec l'API de composition Vue 3.
• Tailwind CSS : framework CSS utilitaire pour un développement d'interface utilisateur rapide et réactif.
• Gestion des listes de tâches : prise en charge intégrée de la gestion des listes de tâches CRUD
• Invoice Maker : prise en charge intégrée de CRUD, créateur de factures interactif
• Composants réutilisables : composants d'interface utilisateur modulaires et réutilisables pour une personnalisation facile.
• Mode sombre : prise en charge intégrée des thèmes clairs et sombres.
• Conception réactive : entièrement optimisée pour toutes les tailles d'écran.
• Dynamic Routing : système de routage flexible alimenté par Nuxt.js.
• Extensible : ajout facile de nouvelles pages, composants et plugins.

? Pile technologique

• Framework Frontend : Vue.js 3 (API de composition)
• Méta Framework : Nuxt.js 3
• Style : Tailwind CSS
• Bibliothèque de composants d'interface utilisateur : NextUI
• Gestionnaire de paquets : pnpm

Installation

1. Clonez le dépôt :

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

2. Installer les dépendances :

   pnpm install
   # or
   npm install

3. Exécutez le serveur de développement :

   pnpm run dev
   # or
   npm run dev

4. Ouvrez votre navigateur et accédez à http://localhost:3000 .

---

Structure du fichier

 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

? Documentation des itinéraires et des pages

Itinéraire	Nom de la page	Description
/	Page principale	La page de destination principale du tableau de bord d'administration.
/login	Page de connexion	Permet aux utilisateurs de se connecter pour accéder au tableau de bord d'administration.
/register	Page d'inscription	Permet aux nouveaux utilisateurs de créer un compte.
/contact	Page de contact	Affiche un formulaire permettant aux utilisateurs de contacter une assistance ou des demandes de renseignements.
/invoice	Page de facture	Affiche une liste de factures ou de détails pour les enregistrements financiers.
/todo	Page de l'application Todo	Une page de gestion et de suivi des tâches sous forme de liste de tâches.
/products	Page Produits	Une page pour gérer les informations sur le produit, y compris les détails et les prix.
/order-lists	Page des listes de commandes	Répertorie toutes les commandes des clients avec des options pour les afficher et les gérer.
/product-stock	Page de stock de produits	Affiche les niveaux de stock actuels et les options de gestion des stocks.
/settings	Page Paramètres	Permet aux utilisateurs de gérer les paramètres système et les préférences personnelles.
/team	Page d'équipe	Présente les membres de l’équipe, les rôles et les options de gestion des autorisations.

? Personnalisation

CSS vent arrière

Modifiez le fichier tailwind.config.js pour personnaliser les thèmes, étendre les styles ou ajouter des plugins.

Composants

Tous les composants se trouvent dans le répertoire components/ à l’intérieur du répertoire features/(domain)/ . Créez de nouveaux composants ou étendez ceux existants en fonction des besoins de votre projet.

Pages et routage

Ajoutez ou modifiez des fichiers dans le répertoire pages/ pour créer de nouveaux itinéraires de manière dynamique.

? Dépendances

• Vue 3
• Nuxt.js 3
• CSS vent arrière
• NuxtUI

Documentation

Configuration de l'authentification

Vous pouvez intégrer n'importe quel service d'authentification (par exemple, Firebase, Auth0 ou JWT personnalisé) à l'aide du middleware et des plugins de Nuxt. Reportez-vous au module d'authentification Nuxt.js pour plus de détails.

Ajout d'intégrations d'API

Utilisez les routes du serveur de Nuxt ou les appels d'API externes dans les répertoires pages/ ou composables/ . Apprenez-en plus sur la gestion de l'API Nuxt.js ici.

? Essai

Tests unitaires

Installez et configurez Vitest pour tester unitairement vos composants Vue.

Tests de bout en bout

Utilisez Cypress ou Playwright pour des tests de bout en bout.

Déploiement

1. Génération de sites statiques (SSG) :

   pnpm run generate

   Déployez les fichiers générés à partir du dossier dist/ vers un fournisseur d'hébergement statique (par exemple, Netlify, Vercel).

2. Rendu côté serveur (SSR) :

   pnpm run build
   pnpm run start

   Déployez l'application sur un hébergement Node.js (par exemple, AWS, Heroku ou DigitalOcean).

? Soutien

Si vous rencontrez des problèmes, avez des questions ou souhaitez demander de nouvelles fonctionnalités ou pages, n'hésitez pas à ouvrir un problème ou à contacter [email protected].

? Cotisations

Les contributions sont les bienvenues ! Veuillez suivre ces étapes :

1. Forkez le référentiel.
2. Créez une branche de fonctionnalités ( git checkout -b feature-name ).
3. Validez vos modifications ( git commit -m "Add feature" ).
4. Poussez vers la branche ( git push origin feature-name ).
5. Ouvrez une pull request.

Licence

Ce projet est sous licence MIT.

? Remerciements

• Vue.js
• Nuxt.js
• NuxtUI
• CSS vent arrière

Aperçu de la page

Vue du bureau

Vue tablette

Vue mobile