Vue Admin Dashboard

A comprehensive, modern admin dashboard built with Vue.js 3, designed for developers who need a solid foundation for their admin interfaces.

✨ Features

• Modern UI: Clean, intuitive interface built with Tailwind CSS
• Responsive Design: Works perfectly on desktop, tablet, and mobile devices
• TypeScript Support: Full TypeScript support for better development experience
• Chart Integration: Built-in support for various chart types using Chart.js
• Dark Mode: Automatic dark mode support with system preference detection
• Modular Architecture: Easily extensible and customizable components

🚀 Quick Start

Installation

``bash npm install @geniusdynamics/vue-admin-dashboard `

Basic Usage

`vue `

📊 Components Included

Layout Components

• AdminDashboard - Main dashboard wrapper
• DashboardLayout - Responsive layout container
• Sidebar - Collapsible navigation sidebar
• TopBar - Top navigation bar with user menu

Data Display

• DashboardCard - Content cards with various styles
• DataTable - Sortable, filterable data tables
• Chart - Chart components for data visualization
• StatsCard - KPI display cards

Form Components

• FormInput - Enhanced input fields
• FormSelect - Dropdown selections
• FormTextarea - Multi-line text inputs
• DatePicker - Date selection component

🎨 Customization

The dashboard is highly customizable through CSS variables and component props:

`css :root { --admin-primary: #3b82f6; --admin-secondary: #64748b; --admin-accent: #f59e0b; } `

📱 Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🔧 Development

Prerequisites

• Node.js 16+
• npm or yarn

Setup

`bash

Clone the repository

git clone https://github.com/geniusdynamics/vue-admin-dashboard.git cd vue-admin-dashboard

Install dependencies

npm install

Start development server

npm run dev

Build for production

npm run build `

Testing

`bash

Run unit tests

npm run test

Run E2E tests

npm run test:e2e ``

📈 Performance

• Bundle Size: ~45KB gzipped
• First Paint: < 100ms
• Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Workflow

Fork the repository

Create a feature branch

Make your changes

Add tests if applicable

Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Vue.js team for the amazing framework
• Tailwind CSS for the utility-first CSS framework
• All our contributors and users

📞 Support

• Documentation: docs.geniusdynamics.com/vue-admin-dashboard
• Issues: GitHub Issues
• Discussions: GitHub Discussions

---

_Built with ❤️ by Genius Dynamics_