Vue template$29

Admin Dashboard

A complete Vue 3 admin dashboard template with a collapsible sidebar, hand-drawn SVG charts, a sortable customers table and settings. Tailwind CSS, dark mode.

by Vueplayv1.0.0Updated 2 hours ago

Install
Full screen ↗

About this template

A full admin app shell you can drop a real backend into: a sidebar that collapses to an icon rail on desktop and becomes a focus-trapped drawer on mobile, a sticky top bar with search, theme switch and a keyboard-friendly user menu, and three working pages switched with a single view ref, no router needed.

The overview page has KPI cards with sparklines, a revenue line chart comparing this year to last (3, 6 or 12 months, with hover and arrow-key inspection), an orders-by-weekday bar chart, recent orders and top products. Every chart is plain SVG drawn from the sample data with a small monotone-curve helper, so there is no charting library to learn or ship. The customers page filters, searches, sorts by any column, paginates and exports CSV; the settings page tracks unsaved changes.

All sample data lives in src/data.ts with exported types, so wiring it to your API is mostly replacing arrays with fetches. Violet is the accent throughout; search-and-replace it to rebrand. Swap the view ref for vue-router routes when you outgrow three pages.

  • App shell: collapsible sidebar, mobile drawer, top bar with search, theme toggle and user menu
  • Overview: KPI cards with sparklines, SVG revenue and orders charts, recent orders, top products
  • Customers: search, status filters, sortable columns, pagination, CSV export
  • Settings: profile, store defaults and notification toggles with unsaved-changes state
  • Keyboard and screen-reader friendly, light and dark mode, no dependencies beyond Vue

Code

28 files in the repo

The source is included with the purchase.

Buy it once and use it in unlimited projects: remix it in the Studio, clone the repo, or install it with npm. Props and usage are documented below.

All dashboards →
Preview of Analytics DashboardFree

Template · Dashboards

Analytics Dashboard

Web analytics dashboard template for Vue 3 and Tailwind CSS: SVG area chart, metric tabs, top pages, sources, a devices donut and a date range picker.

by Vueplay
Preview of Settings PageFree

Template · Dashboards

Settings Page

Account settings template for Vue 3 and Tailwind CSS with section nav, profile and account forms, notification toggles, billing and a floating save bar.

by Vueplay
Preview of Docs Layout$15

Template · Documentation

Docs Layout

Premium Vue 3 documentation template: searchable sidebar, content pages, scroll-aware table of contents, tabbed code blocks with copy, callouts and a mobile drawer.

by Vueplay
Preview of Pricing PageFree

Template · Marketing pages

Pricing Page

Full Vue 3 pricing page: four tiers with a monthly/yearly toggle, a responsive feature comparison table, FAQ and an enterprise CTA. Tailwind CSS.

by Vueplay

Pro feature

Upgrade to Pro

Upgrade to unlock more of Vueplay. Cancel any time.

  • Custom domains with HTTPS
  • Private projects
  • No "Made with Vueplay" badge
  • GitHub sync

$120/year

Compare plansBilling settings