Vela — Vue Admin Dashboard Template

Introduction

This is the Vue.js edition of Vela, a genuine component-for-component rewrite (not an auto-port) of the original React template, built with Vue 3 (<script setup> + TypeScript), Vue Router 4, Tailwind CSS v4, and Vite. It ships with:

• 10 complete demo dashboards — Analytics, CRM, Ecommerce, Finance, Sales, Marketing, Logistics, Projects, SaaS, and Business Intelligence.
• ~155 production-ready routes — full CRUD flows, apps (chat, email, calendar, kanban…), tables, forms, charts, auth flows, settings, reports and utility pages — the same page surface as every other Vela edition.
• 27 handcrafted UI components under src/components/ui, plus 9 dependency-free SVG chart components under src/components/charts.
• Dark & light themes driven by CSS design tokens.
• No tracking scripts — the template contains no analytics, no external calls except Google Fonts and demo images.

Requirements

• Node.js 20+ (LTS recommended) — nodejs.org
• npm 10+ (bundled with Node)
• Any modern editor — VS Code with the Vue - Official (Volar) extension recommended.

Installation

Unzip the package, open a terminal inside the vela-vue folder, then:

# 1. Install dependencies
npm install

# 2. Start the dev server (http://localhost:5173)
npm run dev

# 3. Type-check + production build (outputs to dist/)
npm run build

# 4. Preview the production build locally
npm run preview

Project structure

vela-vue/
├─ index.html              # HTML entry (fonts + favicon load here)
├─ vite.config.ts          # Vite + Vue + Tailwind plugins, @ alias
├─ public/                 # Static assets, favicon, this documentation
└─ src/
   ├─ main.ts              # Vue app bootstrap, router + global styles
   ├─ App.vue               # Router outlet + ToastHost mount point
   ├─ index.css             # ALL design tokens + Tailwind theme mapping
   ├─ components/
   │  ├─ ui/                # 27 reusable components (Button, Card, DataTable…)
   │  └─ charts/             # 9 handcrafted SVG chart components
   ├─ composables/           # useTheme, useToast (module-level singleton state)
   ├─ data/                  # Local demo data (typed, no backend)
   ├─ layout/                # AppShell, Sidebar, Topbar, MobileDrawer, nav-config.ts
   ├─ lib/                   # Helpers (cn, status)
   ├─ pages/                 # One folder per domain (dashboards, users, apps…)
   └─ router/
      ├─ paths.ts            # Canonical URL manifest for every page
      └─ index.ts            # Vue Router 4 route tree assembly

Routing & adding pages

Every URL in the app lives in one manifest: src/router/paths.ts. Pages, sidebar links, and breadcrumbs all resolve paths from it, so a URL is never duplicated. To add a page:

1. Register the path

// src/router/paths.ts
reports: {
  root: "/reports",
  weekly: "/reports/weekly",   // ← new
},

2. Create the page component and route

// src/pages/reports/WeeklyReportPage.vue
<script setup lang="ts">
// ...
</script>
<template>...</template>

// src/router/index.ts
const WeeklyReportPage = () => import("@/pages/reports/WeeklyReportPage.vue");
// ...
{ path: paths.reports.weekly, component: WeeklyReportPage },

3. Add it to the sidebar

// src/layout/nav-config.ts — find the group and add a leaf
{ label: "Weekly Report", to: paths.reports.weekly },

UI & chart components

All reusable components are exported from src/components/ui/index.ts:

import { Button, Card, Badge, DataTable, Modal, Tabs } from "@/components/ui";

<Button variant="primary" size="sm">Save changes</Button>

Highlights: DataTable (generic, sortable, custom per-column cells via named scoped slots keyed by column key), Kanban, Timeline, Modal/Drawer/Popover (all use <Teleport to="body">), form controls (Input, Select, Textarea, Checkbox, Radio — see the gotchas section below), Skeleton loaders, and AnimatedNumber. A live gallery of every component ships in the app itself at /components.

Charts (src/components/charts) are dependency-free SVG: area, bar, donut, heatmap, funnel, sparkline, gauge, and Gantt — all consuming the same design tokens, no charting library required.

Colors & theming

The entire look of Vela is controlled from one file: src/index.css. It defines raw CSS variables for dark (:root) and light (:root[data-theme="light"]), then maps them into Tailwind utilities via the @theme block.

:root {
  --acc: #7c5cff;      /* accent — change this to rebrand the template */
  --acc-2: #9d86ff;    /* lighter accent for gradients/hover           */
  --bg-0: #090a0f;     /* page background                              */
  --bg-2: #12141d;     /* card background                              */
  --t0: #f3f4f9;       /* primary text                                 */
  --ok / --warn / --bad / --info  /* status colors                     */
}

Changing the accent color

Update --acc, --acc-2, and --acc-soft in both the dark and light blocks. Every button, chart, link, and gradient updates instantly — components only ever reference tokens (e.g. bg-acc, text-t1, border-line), never raw hex values.

Dark / light mode

src/composables/useTheme.ts is a module-level singleton composable (a plain ref + watchEffect) that stamps data-theme on <html> and persists the choice to localStorage (key vela-theme). Use it anywhere:

const { theme, toggleTheme } = useTheme();

State management

Vela intentionally ships with no external state library — no Pinia, no Vuex — so you can drop in whatever your product uses. State is organized as:

• Global UI state — two small module-level singleton composables: useTheme (dark/light) and useToast (notifications, backed by a reactive array + a single <ToastHost /> mounted in App.vue).
• Page state — plain ref/computed inside each page (filters, pagination, modals…).
• Demo data — typed constants in src/data/*.ts. Replace these with your API calls; page components consume plain arrays/objects, so swapping in fetch/TanStack Query is straightforward.

Vue-specific gotchas

A couple of things worth knowing if you extend the form components:

All five existing form controls already do this correctly and pass v-bind="$attrs" through for everything else (placeholder, disabled, type, etc.), so this only matters if you build a brand-new control from scratch.

Other framework versions

Vela ships as one multi-framework product. If this Vue.js edition isn't the right fit for your stack, the same ~155-page design and demo data are also available as:

• Nuxt.js — this same Vue codebase, server-rendered.
• React and Next.js editions.
• Static HTML/CSS/vanilla-JS — no build step, no framework at all.
• Laravel, Django, and ASP.NET editions, generated from the static HTML export for teams standardized on those backends.

Each edition is a separate downloadable package with its own bundled documentation.

Build & deployment

npm run build runs vue-tsc -b && vite build and outputs a static site to dist/. Because Vela is a single-page app, your host must rewrite unknown URLs to index.html. Ready-made configs are included:

Files in public/ are copied into dist/ automatically on build — upload the dist/ folder and you're done. If your host isn't listed above, add its equivalent SPA-fallback rule.

Credits & licenses

All third-party software used by Vela is free, open-source, and licensed for commercial use:

Fonts

Images & icons

• All icons and illustrations are hand-drawn inline SVG created for this template — no icon font or icon library is bundled.
• Demo product photos are hot-linked from Unsplash (free for commercial use, no attribution required). They are demo placeholders — replace them with your own product imagery.

Support

If you have questions not covered here, please reach out through the item's Comments tab or the support contact listed on our ThemeForest profile. Please include your purchase code and a description of the issue.

© Vela. All rights reserved.