ArchitectUI Vue 3 Admin Dashboard

ArchitectUI Vue 3 Admin Dashboard is a free, open-source Vue 3 admin panel template built on Bootstrap 5, Pinia and Vite, and maintained by DashboardPack.

What is ArchitectUI Vue 3 Admin Dashboard?

ArchitectUI Vue 3 Admin Dashboard is a free admin dashboard template packaged as a Vue 3 single-page application scaffold. It takes your SaaS or webapp data and renders it into dashboard pages, analytics widgets, charts, forms, tables and user-management screens, running on Node.js 22 and built with Vite. DashboardPack maintains it and publishes the source on GitHub under the architectui-vue-theme-free repository.

Key Features

• Vue 3.5 with Composition API — key components use script setup and the Composition API for reusable stateful widgets.
• Pinia 4 state management — separate dashboard, UI and notifications stores, with LocalStorage persistence and devtools support.
• Bootstrap 5.3 + BootstrapVueNext 0.46 — Bootstrap utility classes plus Vue 3 component bindings for modals, tables and forms.
• Vite 8 build system — fast dev server on port 8087 and optimized production builds with type-check.
• Chart.js 4.5 — analytics chart widgets integrated through the modern Chart.js API.
• TypeScript 6 and Vitest 4 — type-checking via vue-tsc and a unit-test suite of eight tests plus jsdom 30.
• ESLint 10 and Prettier 3.9 — lint and formatting scripts (npm run lint, npm run format).
• Dashboard pages included — analytics dashboards, UI elements, interactive components, forms and authentication user pages, plus a responsive sidebar and header layout.

Who is it for?

• Frontend developers building a SaaS admin panel — start from a working Vue 3 layout with sidebar, header and charts instead of a blank app.
• Vue 3 teams needing a free starter — use the Composition API and Pinia stores as a reference structure for larger applications.
• Developers evaluating Bootstrap-based dashboards — compare a BootstrapVueNext stack against Vuetify or Tailwind-based admin templates.

What can you do with ArchitectUI Vue 3 Admin Dashboard?

• Ship an analytics dashboard: wire real data into the dashboard store to populate statistics cards and Chart.js widgets.
• Add authentication screens: adapt the included user pages for login and user management flows.
• Theme the UI: use the UI store to toggle sidebar collapse, themes and mobile responsiveness, with settings persisted in LocalStorage.

How does ArchitectUI Vue 3 Admin Dashboard work?

Clone the GitHub repository, run npm install, then npm run serve to start the dev server at localhost:8087. npm run build produces a production bundle with type-check, and npm run test:run executes the unit tests.

Pros and cons

• Free with no support provided, per its license section.
• Requires Node.js 22 or newer.
• TypeScript is pinned to 6.0.3 because vue-tsc does not support TypeScript 7.
• Dependencies are kept at current secure versions with a clean npm audit.

FAQ

Is ArchitectUI Vue 3 Admin Dashboard free?

Yes. The template is offered free with no support, and the source is available on GitHub for cloning and modification.

What Vue version does it use?

It runs on Vue 3.5.43 with Vue Router 5.4.0 and the Composition API, with Pinia replacing Vuex from the earlier Vue 2 version.

Does it require Node.js 22?

Yes. Node.js 22 or newer plus npm 9 or yarn 1.22 is listed as a prerequisite for installing and building the template.