Quasar Prime Admin Template

Proudly serving over 81+ happy customers and counting! 🚀🚀🚀

Introducing Quasar Prime Admin Template – Your Ultimate Solution for a Powerful and Elegant Dashboard!

Quasar Prime Template – Empowering Developers with an Exceptional Vue.js Admin Dashboard

Unlock the full potential of your development projects with the Quasar Prime Template – a Vue.js Admin Dashboard that sets the standard for developer-friendly interfaces. Meticulously crafted to adhere to the highest industry standards, this template combines speed, usability, and scalability, providing an unparalleled foundation for creating dynamic and customizable admin dashboards.

Now also available for TypeScript and script setup! 🚀🚀

Now also supports Vite 5 and 6

Doc - https://quasar-prime-admin-documentation.netlify.app/

✅ Standard License Version

Ready to Elevate Your Development Experience?

If you're looking to build elegant internal tools or dashboards for your organization, head over to my Sponsorship Page and unlock the full potential of the Quasar Prime Admin Template.

A one-time sponsorship of $549 $249 grants you Standard License access — perfect for internal use only (non-commercial or commercial within your organization).

---

🚀 Extended License Version

Ready to Elevate Your Development Experience?

Want to use the Quasar Prime Admin Template in SaaS, client projects, or commercial products? Head over to my Sponsorship Page and gain full access with the Extended License.

A one-time sponsorship of $1999 $1499 gives you the rights to use the template in redistributable commercial projects (with significant modifications).

---

Curious? Check out the live demo at Quasar Prime Analytics to experience the dynamic features and versatility this template offers.

If you want to pay using PayPal, please contact me at pratikpatelpp802@gmail.com.

Elevate your projects with Quasar Prime Template – where minimalist design meets robust functionality.

Why Choose Quasar Prime Template?

1. Developer-Friendly and Highly Customizable:

Tailored for developers, this admin dashboard template offers an intuitive and customizable environment. Adhering to best practices, it streamlines the development process, ensuring both efficiency and flexibility.

2. Premium Quality Applications Made Easy:

Elevate your applications with Quasar Prime Template's innovative design. Craft visually stunning, high-performing single-page applications that seamlessly adapt to various devices, including desktops, tablets, and mobiles.

3. Versatility Unleashed:

Whether you're working on SaaS platforms, project management tools, e-commerce backends, CRM systems, fitness apps, analytics platforms, or education applications, Quasar Prime Template empowers you to build diverse web applications effortlessly.

4. Ready-to-Use Templates and Applications:

Jumpstart your projects with pre-built templates and 10 carefully designed applications, including Email, Chat, Calendar, eCommerce, Invoice, User Management, Roles & Permissions, Front-Pages, Maps, and Charts.

5. Quick Start with Documentation:

Boasting user-friendly features, Quasar Prime Template ensures a swift start to your development journey. Two niche dashboards and a well-documented starter kit provide a seamless experience from the outset.

6. Free Lifetime Updates:

Your purchase of Quasar Prime Template comes with an invaluable perk – free lifetime updates. Stay ahead with continuous enhancements, improvements, and new features, ensuring your admin dashboard remains cutting-edge.

In summary, Quasar Prime Template is more than an admin dashboard; it's a dynamic toolkit designed to empower developers in creating exceptional, scalable, and visually striking web applications. Experience the difference with Quasar Prime Template – where innovation meets ease of use.

In closing, we extend the assurance that all transactions are final, and no refunds shall be provided.

Screenshots

1. Dashboard

Dark Mode

2. CRM

3. Ecommerce

4. Email

5. Profile

Changelog

29.07.2026

@quasar/app-vite v3 (Vite 8) + Netlify deployment, SEO, performance, accessibility & security pass

Lighthouse on the deployed site, before → after (same page, /):

Category	Mobile	Desktop
Performance	71 → 89	92 → 98
Accessibility	88 → 100	82 → 100
Best Practices	100 → 100	100 → 100
SEO	100 → 100	100 → 100
Agentic Browsing	1/3 → 3/3	1/3 → 3/3

Core Web Vitals, mobile: FCP 2.8s → 1.9s, LCP 4.8s → 3.1s, TBT 90ms → 60ms. Desktop: FCP 0.6s → 0.4s, LCP 1.0s → 0.7s, SI 2.5s → 1.1s.

Build: @quasar/app-vite v2 → v3 (Vite 8)

Five breaking changes needed handling — these are the ones that will bite a fork:

0a. Wrapper imports moved: #q-app/wrappers → #q-app for defineConfig, defineBoot, defineStore. 0b. vueOptionsAPI now defaults to false. This template is almost entirely Options API, so quasar.config.js sets it back to true — without it data/methods/computed stop working app-wide. 0c. process is no longer polyfilled in the browser. vue-shepherd's ESM entry reads process.env.ES_BUILD and throws process is not defined; extendViteConf defines it as 'true'. 0d. src/... import specifiers switched to the @/... alias. 0e. QResizeObserver feedback loops guarded in Mail.vue and Chat.vue.

Also bumped: vue-router 5, pinia 3, Node >= 22.12.

Deployment

1. Added netlify.toml — build command, publish directory and, importantly, the SPA history-mode fallback (/* → /index.html 200). Without it every deep link (/analytics, /invoice_list, …) returned Netlify's 404 page, so no route except / was reachable on refresh or crawlable by search engines. Added public/_redirects and public/_headers with the same rules, since the build copies them into dist/spa/ and netlify.toml is only read when Netlify builds from the repo — not on a manual upload or CLI deploy.
2. Cache lifetimes: hashed /assets/* and /fonts/* are now immutable/long-lived, index.html is must-revalidate, robots.txt / sitemap.xml / llms.txt get a short TTL.
3. Security headers: Content-Security-Policy, Cross-Origin-Opener-Policy, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy and HSTS. The CSP needs no unsafe-inline/unsafe-eval for scripts and was verified against every chart, map, calendar, tour and media-player page with zero violations.

SEO

4. <html lang="en">, a real meta description, canonical link, robots directives, Open Graph + Twitter card tags, theme-color and JSON-LD SoftwareApplication structured data.
5. Per-route <title> and self-referencing canonical, applied from a router.afterEach hook. Previously all 80+ routes shared one title and pointed their canonical at the homepage, i.e. declared themselves duplicates of /.
6. public/robots.txt and public/sitemap.xml are now generated from src/router/routes.js by scripts/generate-seo-files.mjs, wired in as a prebuild step so the sitemap can never drift from the router. Auth, error and maintenance routes are excluded. Honours SITE_URL / Netlify's URL.
7. Added public/llms.txt (llmstxt.org format) describing every demo route for AI agents and crawlers.
8. The landing page now has a real <h1> and intro copy instead of a bare logo.

Performance

9. Leaflet is a local npm dependency instead of two render-blocking unpkg tags in index.html, and the Google Maps JS API is injected on demand by /map. Both previously loaded on every page for the sake of two routes.
10. ApexCharts (~570 KB) and vuedraggable (~177 KB) moved out of the entry chunk — src/boot/libs.js registers them with defineAsyncComponent, so they are fetched the first time a chart or sortable list actually renders.
11. Web fonts: Public Sans converted from .ttf to .woff2 (207 KB → 86 KB), self-hosted from /public/fonts and preloaded. Material Icons is self-hosted with font-display: fallback rather than the bundled block. Roboto was dropped entirely — it shipped 6 @font-face rules with no font-display and was not used once $typography-font-family was set correctly. 11b. No third-party requests left on the critical path. The initial load used to make 4 cross-origin requests across 2 origins, all starting around 750 ms: two cdn.quasar.dev images in the header/drawer, plus a call to api.iconify.design for the three header icons — which landed right on top of First Contentful Paint, so those icons only appeared after a fresh DNS + TLS + RTT to another origin. The shell's images are bundled locally in src/assets/brand/ (Vite inlines the two logos as data: URIs), and the 23 icons the shell needs are bundled as src/utils/tabler-icons-shell.json (~1.7 KB gzipped) and registered with addCollection() before mount. The other ~264 icons load at browser idle via requestIdleCallback, so they never compete with the initial load. The Iconify API stays enabled as a fallback, making this a pure optimisation that can never cause a missing icon. Generated by scripts/generate-icon-subset.mjs (npm run icons, also part of prebuild), which carries over Tabler's renamed-icon aliases (discount-2 → rosette-discount, 2fa → auth-2fa, …).
12. Browser build target raised from safari14 to safari16, which matches the es2022 target already declared and removes the transform helpers Lighthouse flagged as "Legacy JavaScript".
13. Removed the unused vuex dependency (the project uses Pinia).

Accessibility (88/82 → 100/100)

14. user-scalable=no and maximum-scale=1 removed from the viewport meta — pinch-zoom works again (WCAG 1.4.4).
15. Accessible names added to every icon-only header/drawer control (theme toggle, language, shortcuts, notifications, dismiss, drawer collapse) and decorative icons/badges marked aria-hidden.
16. The account avatar and the drawer brand block are now a real <q-btn> and a real link, so both are keyboard reachable.
17. Fixed duplicate/nested <main> landmarks: the layout wrapped each routed <q-page> in a second <q-page>, and QPage always renders <main>. The wrapper is a plain div now, with its min-height reproduced in CSS.
18. Drawer navigation wrapped in <nav>; the role="list" that required listitem children removed from the nav q-list.
19. Contrast: #697a8d → #64748b (4.40:1 → 4.76:1 on white) across the 13 files that used it.
20. The dark-theme text override was keyed off @media (prefers-color-scheme: dark) instead of Quasar's body--dark. Anyone whose OS was in dark mode while the app was on the light theme got 1.92:1 body text. Now gated on the actual theme.

Bug fixes found along the way

21. 59 avatar/icon paths were stored as source-tree strings ("../src/assets/avatars/avatar-2.png", "/src/assets/images/avatars/…" — a directory that never existed), so the bundler emitted nothing for them and every one 404'd in production. They now resolve through src/utils/asset-url.js.
22. The two Public Sans @font-face rules both omitted font-style, so the italic face was silently overridden by the roman one and italics never rendered; and neither declared a font-weight range, so the variable wght axis was pinned at 400 and all bold text was synthesised by the browser.
23. Chat demo images pointed at placeimg.com, shut down in 2023 — replaced with a bundled asset.
24. Leaflet's default marker icons are wired up explicitly, so they survive Vite's asset hashing.

Dependencies — npm audit: 4 vulnerabilities (1 high, 3 moderate) → 0

25. quasar 2.21.4 → 2.23.3 (prototype pollution in extend()).
26. echarts 5 → 6.1.0 and vue-echarts 6 → 8.0.1 (XSS advisory).
27. brace-expansion transitive DoS advisory resolved.

21.04.2025

1. Packages Updated in all branch
2. Vite 6 supported now
3. Vite 5 branch will be deprecated after few days will maintain vite 6 branch

03.01.2025

Major Updates

1. Packages Updated
2. Media Player Added
3. Tree View Added
4. Scrollbar Added
5. Utilities Integrated - Added support for:
   • moment.js
   • dayjs
   • numeral.js
   • copy-to-clipboard
   • UID generator
6. Drag and Drop Examples Added

11.10.2024

1. Refactored code to adhere to SonarQube recommendations
2. Addressed code smells and vulnerabilities
3. Improved code readability and maintainability

19.09.2024

1. Few Fixes related to i18n
2. Korean Language Added
3. Bump Versions

15.07.2024

1. Pinia added in Vite 5 Branch and i18n warning fixes
2. Bump versions
3. New Language pack added (French, Russian)

19.03.2024

Documentation added

07.03.2024

Added Leaflet examples to showcase interactive maps and geospatial data visualization capabilities

29.02.2024

1. Integration of Quasar v2.14.5 with Vite 5 for enhanced performance and development experience.
2. Vite 5 brings improved build times and development server performance, ensuring faster development cycles.

08.02.2024

Added three new pages to the Academy platform:

1. Academy Dashboard
2. Academy My Course
3. Academy Course Details

Enjoy exploring the new additions!