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

1. Clone the repo

   git clone https://github.com/flatlogic/light-blue-vue.git
   cd light-blue-vue
   

2. Install dependencies

   npm install
   

3. Run the development server

   npm run dev
   

   Navigate to http://localhost:3000/

4. Build for production

   npm run build
   

5. 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.