180 lines
6.2 KiB
Markdown
180 lines
6.2 KiB
Markdown
# Light Blue Vue - Modern Vue 3 Admin Dashboard Template
|
|
|
|
[View Demo](https://flatlogic.com/templates/light-blue-vue/demo) | [Download](https://github.com/flatlogic/light-blue-vue/archive/refs/heads/master.zip) | [More Templates](https://flatlogic.com/templates) | [Discord Community](https://discord.gg/flatlogic-community) | [Support Forum](https://flatlogic.com/forum)
|
|
|
|
[](https://flatlogic.com/admin-dashboards/light-blue-vue/demo)
|
|
|
|
**Originally a premium product priced at $69+, made available for free in January 2025!**
|
|
|
|
Looking for a perfect codebase generator for your Startup? Try [Flatlogic AI Web App Generator](https://flatlogic.com/generator).
|
|
|
|
---
|
|
|
|
## Why Light Blue Vue?
|
|
|
|
- **Modern Stack**: Vue 3.5+ with Composition API, TypeScript, and Vite
|
|
- **Tons of Components**: Hundreds of ready-to-use UI elements, charts, and more
|
|
- **Type-Safe**: Full TypeScript support with strict mode
|
|
- **Fast Development**: Vite for instant HMR and fast builds
|
|
- **Join the Community**: [Flatlogic Discord](https://discord.gg/flatlogic-community) is where the action happens
|
|
- **Free Node.js Backend**: Pair it up with [this backend](https://github.com/flatlogic/nodejs-backend) to go full-stack
|
|
|
|
---
|
|
|
|
## Quick Start
|
|
|
|
1. **Clone the repo**
|
|
```bash
|
|
git clone https://github.com/flatlogic/light-blue-vue.git
|
|
cd light-blue-vue
|
|
```
|
|
|
|
2. **Install dependencies**
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. **Run the development server**
|
|
```bash
|
|
npm run dev
|
|
```
|
|
Navigate to http://localhost:3000/
|
|
|
|
4. **Build for production**
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
5. **Preview production build**
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
---
|
|
|
|
## Available Scripts
|
|
|
|
| Command | Description |
|
|
|---------|-------------|
|
|
| `npm run dev` | Start development server with HMR |
|
|
| `npm run build` | Build for production |
|
|
| `npm run preview` | Preview production build locally |
|
|
| `npm run type-check` | Run TypeScript type checking |
|
|
| `npm run lint` | Run ESLint and auto-fix issues |
|
|
| `npm run test` | Run tests with Vitest |
|
|
|
|
---
|
|
|
|
## Features
|
|
|
|
- Vue 3.5+ with Composition API and `<script setup>`
|
|
- TypeScript with strict mode
|
|
- Vite 6 for fast development and builds
|
|
- Pinia for state management
|
|
- Vue Router 4 with type-safe routing
|
|
- Bootstrap 5 with Bootstrap Vue Next
|
|
- Multiple chart libraries (ApexCharts, Highcharts, ECharts, amCharts)
|
|
- Google Maps integration
|
|
- FullCalendar integration
|
|
- Form validation
|
|
- Responsive design for all devices
|
|
- Dark-themed UI
|
|
|
|
---
|
|
|
|
## Tech Stack
|
|
|
|
| Category | Technology |
|
|
|----------|------------|
|
|
| Framework | Vue 3.5+ |
|
|
| Language | TypeScript |
|
|
| Build Tool | Vite 6 |
|
|
| State Management | Pinia |
|
|
| Routing | Vue Router 4 |
|
|
| UI Framework | Bootstrap 5 / Bootstrap Vue Next |
|
|
| Charts | ApexCharts, Highcharts, ECharts, amCharts 5 |
|
|
| Maps | Google Maps, amCharts Maps |
|
|
| Calendar | FullCalendar 6 |
|
|
| HTTP Client | Axios |
|
|
| Styling | SCSS |
|
|
| Testing | Vitest |
|
|
| Linting | ESLint |
|
|
|
|
---
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── api/ # API services and HTTP client
|
|
├── assets/ # Static assets (images, icons)
|
|
├── components/ # Reusable Vue components
|
|
│ ├── Header/
|
|
│ ├── Sidebar/
|
|
│ ├── Widget/
|
|
│ └── ...
|
|
├── composables/ # Vue composables (hooks)
|
|
├── directives/ # Custom Vue directives
|
|
├── documentation/ # Documentation pages
|
|
├── pages/ # Page components (routes)
|
|
│ ├── Dashboard/
|
|
│ ├── Charts/
|
|
│ ├── Ecommerce/
|
|
│ ├── Forms/
|
|
│ ├── Tables/
|
|
│ └── ...
|
|
├── router/ # Vue Router configuration
|
|
├── store/ # Pinia stores
|
|
├── styles/ # Global SCSS styles
|
|
├── types/ # TypeScript type definitions
|
|
└── main.ts # Application entry point
|
|
```
|
|
|
|
---
|
|
|
|
## Components
|
|
|
|
- **UI Elements**: Badge, Card, Carousel, Modal, Buttons, Alerts, Progress, Tabs, etc.
|
|
- **Charts**: Line, Area, Bar, Pie, Donut, Sparklines, and more
|
|
- **Forms**: Validation, Wizard, Elements, Inputs
|
|
- **Dashboards**: Analytics, Visits
|
|
- **Pages**: Profile, E-commerce, Calendar, Email, Error pages
|
|
- **Maps**: Google Maps, Vector Maps
|
|
|
|
---
|
|
|
|
## Available Variants
|
|
|
|
| | **Material** | **Transparent** | **Classic** | **Sofia** | **Flatlogic** |
|
|
|---------------|--------------|-----------------|-------------|-----------|---------------|
|
|
| **React** | [React Material Admin](https://github.com/flatlogic/react-material-admin-full) | [Light Blue React](https://github.com/flatlogic/light-blue-react) | [Sing App React](https://github.com/flatlogic/sing-app-react) | [Sofia React](https://github.com/flatlogic/sofia-react) | [One React](https://github.com/flatlogic/one-react) |
|
|
| **Angular** | [Angular Material Admin](https://github.com/flatlogic/angular-material-admin-full) | [Light Blue Angular](https://github.com/flatlogic/light-blue-angular) | [Sing App Angular](https://github.com/flatlogic/sing-app-angular) | - | - |
|
|
| **Vue** | [Material Vue](https://github.com/flatlogic/material-vue-full) | [Light Blue Vue](https://github.com/flatlogic/light-blue-vue) | [Sing App Vue](https://github.com/flatlogic/sing-app-vue) | - | - |
|
|
| **Bootstrap** | - | [Light Blue HTML5](https://github.com/flatlogic/light-blue-html5) | [Sing App HTML5](https://github.com/flatlogic/sing-app-html5) | - | [One Bootstrap](https://github.com/flatlogic/one-bootstrap-template-full) |
|
|
|
|
---
|
|
|
|
## How to Contribute
|
|
|
|
- **Star this repo** - show some love
|
|
- **Report bugs** - open an issue
|
|
- **Submit PRs** - improvements are welcome
|
|
- **Join the [Discord](https://discord.gg/flatlogic-community)** - meet fellow devs
|
|
|
|
---
|
|
|
|
## About Flatlogic
|
|
|
|
[Flatlogic AI Software Engineer](https://flatlogic.com/ai-software-development-agent) builds modern business software so you don't have to. Our AI Software Development Agent helps you generate, deploy, and maintain enterprise applications with minimal effort.
|
|
|
|
---
|
|
|
|
## License
|
|
|
|
This template is free to use under the MIT license. Modify it, extend it, make it your own.
|
|
|
|
---
|
|
|
|
> **Questions or feedback?**
|
|
> Join our [Flatlogic Community Discord](https://discord.gg/flatlogic-community) or visit our [support forum](https://flatlogic.com/forum).
|