View Demo | Download | More Templates | Discord Community | Support Forum
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.
- 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 is where the action happens
- Free Node.js Backend: Pair it up with this backend to go full-stack
-
Clone the repo
git clone https://github.com/flatlogic/light-blue-vue.git cd light-blue-vue -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Build for production
npm run build
-
Preview production build
npm run preview
| 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 |
- 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
| 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 |
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
- 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
| Material | Transparent | Classic | Sofia | Flatlogic | |
|---|---|---|---|---|---|
| React | React Material Admin | Light Blue React | Sing App React | Sofia React | One React |
| Angular | Angular Material Admin | Light Blue Angular | Sing App Angular | - | - |
| Vue | Material Vue | Light Blue Vue | Sing App Vue | - | - |
| Bootstrap | - | Light Blue HTML5 | Sing App HTML5 | - | One Bootstrap |
- Star this repo - show some love
- Report bugs - open an issue
- Submit PRs - improvements are welcome
- Join the Discord - meet fellow devs
Flatlogic AI Software Engineer 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.
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 or visit our support forum.