# ArchitectUI Vue 3 Admin Dashboard v2.3.1

![ArchitectUI Vue 3 Preview](architectui-vue-free-preview.webp)

**Live Demo**: [https://demo.dashboardpack.com/architectui-vue-free/](https://demo.dashboardpack.com/architectui-vue-free/)

[ArchitectUI](https://dashboardpack.com/theme-details/architectui-dashboard-html-pro) is one of the most popular admin dashboard templates ever released. It is used by thousands of developers to create webapps and SaaS totaling 100 million monthly active users. We have converted this template to support various frontend frameworks such as [Angular](https://dashboardpack.com/theme-details/architectui-angular-7-bootstrap-material-design-pro?v=7516fd43adaa), [Vue](https://dashboardpack.com/theme-details/architectui-dashboard-vue-pro) and [React](https://dashboardpack.com/theme-details/architectui-dashboard-react-pro?v=7516fd43adaa). This particular version of ArchitectUI is based on Vue 3 with modern tooling and best practices.

## 🚀 **Vue 3 Modernization Complete**

**Last Updated**: October 8, 2026

This template has been **completely modernized** and enhanced with significant improvements:

### **Latest Enhancements (October 2026)**

- **Security Patch**: `npm audit` is clean again after refreshing the Vite/Vitest/jsdom/Vue toolchain and clearing advisories in `@vue/server-renderer`, `undici`, `@vitest/mocker`, `brace-expansion`, `nanoid`, `postcss-selector-parser`, and `source-map-js`.
- **Dependencies Refreshed**: Vue 3.5.43, Vue Router 5.4.0, Pinia 4.0.3, Bootstrap-Vue-Next 0.46.4, Vite 8.3.4, Vitest 4.1.11, ESLint 10.12, Prettier 3.9.9, sass 1.105, vue-tsc 3.3.12.
- **Collapsed Sidebar Badge Fix**: upgrade badges now hide in desktop icon-only mode and reappear when the sidebar expands.
- **Design Polish**: softer dashboard background, lighter card borders, calmer shadows, and cleaner headers for closer consistency with the refreshed HTML and React templates.

### **Previous Enhancements (August 2026)**

- **Security Patch**: Resolved **3 high-severity advisories** — the Dependabot-flagged **PostCSS path traversal** ([GHSA-r28c-9q8g-f849](https://github.com/advisories/GHSA-r28c-9q8g-f849), `postcss → 8.5.25`) plus `brace-expansion` and `immutable` DoS issues. All dev-only / transitive — none ship in the production bundle
- **Pinia 3 → 4**: Major state-management upgrade; the template's `createPinia` / `defineStore` / plugin usage is unchanged in v4
- **Dependencies Refreshed**: Vite 8.2.0, Vue 3.5.40, Vue Router 5.2.0, Bootstrap-Vue-Next 0.45.9, FontAwesome 7.3.1, Vitest 4.1.10, jsdom 30, @types/node 26.1, ESLint 10.8, Prettier 3.9.6, sass 1.102, vue-tsc 3.3.9
- **TypeScript held at 6.0.3**: TS 7 (the native rewrite) removes the `./lib/tsc` export that `vue-tsc` depends on — verified to break `type-check`. Revisit when `vue-tsc` adds TS 7 support
- **Requires Node.js 22+**
- **Zero Vulnerabilities**: Clean `npm audit`; type-check, build and all 8 unit tests passing

### **Previous Release (July 2026)**

- **Security Patch**: Resolved **9 Dependabot alerts** across `vite`, `undici`, `launch-editor`, and `@babel/core`

### **Core Modernization Features**

- ✅ **Zero vulnerabilities** - all dependencies at latest secure versions
- ✅ **Vue 3.5.40** with latest features and optimizations
- ✅ **Modern build system** with Vite 8.2
- ✅ **Vue 3 Composition API** throughout key components
- ✅ **Pinia 4.x** for state management
- ✅ **Bootstrap 5.3** integration with BootstrapVueNext 0.45
- ✅ **Chart.js 4.x** with modern API usage
- ✅ **FontAwesome 7.3** with tree-shaking optimization
- ✅ **TypeScript 6** with paths-based module resolution
- ✅ **Vitest 4** for modern testing
- ✅ **Professional styling** with original design integrity maintained

## 📊 **Key Features**

### **Modern Architecture**

- **Vue 3 Composition API**: Clean, reusable component patterns
- **Pinia Store Management**: Centralized state with reactive updates
- **Vite Build System**: Fast development and optimized production builds
- **Bootstrap 5**: Latest styling framework with modern utilities
- **ESLint + Prettier**: Code quality and consistent formatting

### **Developer Experience**

- **Hot Module Replacement**: Lightning-fast development
- **Component Reusability**: Modular widget system
- **TypeScript Support**: Full type safety ready
- **Tree-shaking**: Optimized bundle sizes
- **Modern Testing**: Vitest integration ready

### **Dashboard Components**

- **Analytics Dashboard**: Real-time data visualization
- **Responsive Sidebar**: Mobile-first navigation
- **Interactive Charts**: Chart.js 4.x integration
- **Enhanced Header**: Professional layout with tooltips and indicators
- **User Management**: Authentication pages
- **UI Components**: Buttons, cards, modals, tables, forms

### **State Management**

- **Dashboard Store**: Analytics data and statistics
- **UI Store**: Theme, sidebar, and layout preferences
- **Notifications Store**: System messages and alerts
- **Persistent Settings**: LocalStorage integration

## 🛠️ **Technology Stack**

| Technology       | Version | Purpose             |
| ---------------- | ------- | ------------------- |
| Vue.js           | 3.5.43  | Frontend framework  |
| Vue Router       | 5.4.0   | Client-side routing |
| Pinia            | 4.0.3   | State management    |
| Vite             | 8.3.4   | Build tool          |
| Bootstrap        | 5.3.8   | CSS framework       |
| BootstrapVueNext | 0.46.4  | Vue 3 components    |
| Chart.js         | 4.5.1   | Data visualization  |
| FontAwesome      | 7.3.1   | Icons               |
| TypeScript       | 6.0.3   | Type safety         |
| Vitest           | 4.1.11  | Testing framework   |
| jsdom            | 30.1.2  | DOM simulation      |
| ESLint           | 10.12.0 | Code quality        |

## 🚀 **Getting Started**

### **Prerequisites**

- Node.js 22+
- npm 9+ or yarn 1.22+

### **Installation**

```bash
# Clone the repository
git clone https://github.com/DashboardPack/architectui-vue-theme-free.git
cd architectui-vue-theme-free

# Install dependencies
npm install

# Start development server
npm run serve

# Build for production
npm run build

# Run linter
npm run lint
```

### **Development Commands**

```bash
npm run serve        # Start development server (http://localhost:8087)
npm run build        # Build for production (with type-check)
npm run lint         # Run ESLint linter with auto-fix
npm run preview      # Preview production build
npm run test         # Run tests in watch mode
npm run test:run     # Run tests once
npm run format       # Format code with Prettier
npm run type-check   # Run TypeScript type checking
```

## 📁 **Project Structure**

```
src/
├── components/          # Reusable Vue components
│   ├── DashboardWidget.vue
│   └── StoreDemo.vue
├── stores/             # Pinia stores
│   ├── dashboard.js    # Analytics and dashboard data
│   ├── ui.js          # UI state and preferences
│   ├── notifications.js # System notifications
│   └── index.js       # Store exports
├── DemoPages/         # Demo pages by category
│   ├── Dashboards/    # Dashboard components
│   ├── Elements/      # UI elements
│   ├── Components/    # Interactive components
│   ├── Forms/         # Form components
│   └── UserPages/     # Authentication pages
├── Layout/            # Layout components
│   ├── Components/    # Header, Sidebar, Footer
│   └── Wrappers/      # Layout wrappers
└── assets/           # Static assets and styles
```

## 🎨 **Component Examples**

### **Using Pinia Stores**

```vue
<script setup>
import { useDashboardStore } from '@/stores/dashboard'
import { useUIStore } from '@/stores/ui'

const dashboardStore = useDashboardStore()
const uiStore = useUIStore()

// Access reactive data
const stats = dashboardStore.stats
const sidebarCollapsed = uiStore.sidebarCollapsed

// Call store actions
dashboardStore.refreshDashboard()
uiStore.toggleSidebar()
</script>
```

### **Reusable Dashboard Widget**

```vue
<template>
  <DashboardWidget
    stat-key="cashDeposits"
    icon-class="pe-7s-scissors"
    icon-bg-class="bg-warning"
  />
</template>
```

## 🔧 **Configuration**

### **Vite Configuration**

The project uses Vite for fast development and optimized builds. Configuration is in `vite.config.js`.

### **ESLint Configuration**

Code quality is enforced with ESLint. Configuration is in `.eslintrc.js`.

### **Store Configuration**

Pinia stores are configured in `src/stores/index.js` with persistence and devtools support.

## 🚦 **Migration Guide**

This template has been migrated from Vue 2 to Vue 3.5.17. Key changes include:

### **Vue 3.5.17 Features**

- **Composition API**: Modern reactive patterns with latest optimizations
- **defineComponent**: Better TypeScript support
- **Pinia**: Vue 3 native state management
- **Vite**: Fast build tooling
- **Latest Vue 3 optimizations**: Performance improvements and bug fixes

### **Breaking Changes Addressed**

- Updated all dependencies to Vue 3.5.17 compatible versions
- Migrated BootstrapVue to Bootstrap 5 + BootstrapVueNext
- Replaced Vuex with Pinia
- Updated FontAwesome integration
- Modernized Chart.js integration

## 📚 **Documentation**

### **Store Usage**

- **Dashboard Store**: Analytics data, statistics, todos
- **UI Store**: Sidebar state, theme management, mobile responsiveness
- **Notifications Store**: System messages and alerts

### **Component Patterns**

- Use `defineComponent` for better TypeScript support
- Leverage Composition API for reactive state
- Follow single responsibility principle
- Use stores for cross-component communication

## 🛡️ **Security & Dependencies**

- **Zero vulnerabilities**: All dependencies updated to secure versions
- **Modern dependencies**: Latest stable versions
- **Tree-shaking**: Optimized bundle sizes
- **CSP compatible**: Content Security Policy friendly

## 🤝 **Contributing**

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run `npm run lint` to check code quality
5. Submit a pull request

## 📄 **License**

This template is provided for free with no support. It is actively maintained and all dependencies are kept updated. The template is safe to use in production.

## 🌟 **More Templates**

For more admin templates like this, please check out our [Github profile](https://github.com/DashboardPack) or [website](https://dashboardpack.com/).

---

## 🎯 **Perfect for Modern Development**

This Vue 3 modernized version of ArchitectUI provides developers with:

- **Modern tooling** for efficient development
- **Best practices** for Vue 3 applications
- **Production-ready** code structure
- **Zero vulnerabilities** for secure applications
- **Comprehensive documentation** for easy onboarding

Start building your next Vue 3 application with confidence! 🚀