Light Blue Vue - Modern Vue 3 Admin Dashboard Template

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.

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 is where the action happens
Free Node.js Backend: Pair it up with this backend to go full-stack

Quick Start

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
```
Navigate to http://localhost:3000/
Build for production
```
npm run build
```
Preview production build
```
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	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

How to Contribute

Star this repo - show some love
Report bugs - open an issue
Submit PRs - improvements are welcome
Join the Discord - meet fellow devs

About Flatlogic

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.

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 or visit our support forum.

6.2 KiB Raw Permalink Blame History