Apex Dashboard — Vue/Nuxt Edition

Description

Apex Dashboard — Vue/Nuxt Edition

A premium admin dashboard template built with Nuxt 4, Vue 3 (Composition API), TypeScript, and Tailwind CSS 4. The Apex design system — OKLCH color tokens, a dark sidebar, an emerald primary, and a modern type scale — ported to Vue and wired up with 58 real routes, interactive data tables, live charts, and a vendored shadcn-vue component library. Because Nuxt is Vue, the same codebase runs as a full SSR app or as a static Vue 3 SPA (set ssr: false). Production build is green and ready to brand.

Why Apex Vue/Nuxt?

• 58 routes, mock data included — no backend required, so it runs the moment you npm run dev, and deploys to any static host or Node/edge runtime
• shadcn-vue primitives on reka-ui — button, card, dialog, dropdown, popover, sheet, table, tabs, select, command, and 20+ more, vendored as source you own and can restyle; extend with npx shadcn-vue add
• Genuinely interactive — detail / edit / new flows across Orders, Products and Users, a drag-and-drop Kanban board, a ⌘K command palette, and a live theme customizer
• In-app documentation — a built-in docs site (getting started, folder structure, theming, i18n, components, charts, deployment, and more)

Pages & Modules

• Dashboards — Overview, Analytics, eCommerce, CRM, SaaS, and a Charts gallery
• Commerce — Orders, Products, Customers, Invoices and Users, each a reactive data table with search, sort, pagination, status pills, and row actions, plus detail / edit / new pages
• Apps — 3-pane Mail client, live Chat, Files manager, drag-and-drop Kanban, and a month Calendar
• Forms — multi-step Wizard, a form-controls showcase, tabbed Settings, Profile, and Pricing
• System — Notifications, Billing, Help & Support, and a full in-app Docs section
• Auth — login, register, forgot / reset password, two-factor, verify-email, and lock-screen
• Status — 403, 500, coming-soon, and maintenance

Interactions

• ⌘K command palette — global shortcut and header search, quick actions plus jump-to-page navigation, built on reka-ui’s Command primitive
• Theme customizer — live accent presets (6 colors), density, light/dark/system, sidebar vs. top-nav layout, fluid vs. boxed container, and LTR/RTL direction; persisted to localStorage via CSS-variable overrides with no flash on reload
• Kanban drag-and-drop — move cards between columns with live counts (vue-draggable-plus)
• Internationalization — English, German, and French via @nuxtjs/i18n, switchable at runtime

Design & Theming

• Tailwind CSS 4 with an OKLCH token system — semantic tokens for primary, card, muted, sidebar, chart-1…5, success, warning, and destructive
• Dark and light modes out of the box, respecting system preference, with a pre-paint script that prevents the flash of the wrong theme
• Density modes — compact, comfortable, and spacious — driven by CSS variables
• RTL support — full right-to-left layout, toggled from the customizer

Charts

• Unovis (@unovis/vue) area, bar, and donut charts with tabbed series, formatted axes, and themed tooltips — the same engine shadcn-vue charts use
• Hand-rolled SVG sparklines for exact color control and zero extra dependencies

Developer Experience

• Vue 3 Composition API throughout — <script setup>, composables, and typed props; no legacy Options-API boilerplate
• File-based routing — Nuxt app/pages/, layouts, dynamic routes, and a typed data layer under app/lib/data
• TypeScript end to end with a clean @/* alias and vendored UI primitives you own
• Deploy anywhere — SSR via Nitro (Vercel / Netlify / Cloudflare / Node / Docker) or a static SPA at the root or a subpath, with base-path support included

Tech Stack

License: Commercial | View Live Demo

Pricing

• Personal License — $69.00 — Purchase
• Developer License — $149.00 — Purchase
• Lifetime Developer License — $349.00 — Purchase