Adminex - Documentation

Introduction

A modern, feature-rich Vue 3 Admin Dashboard built with Vue 3, TypeScript, and Tailwind CSS — packed with advanced complex logic features that go far beyond a typical template.

4

Dashboards

8

Applications

8

Advanced Features

10

Languages

Tech Stack

Vue 3 TypeScript 6 Vite 8 Tailwind CSS 4 Vue Router 5 Pinia Chart.js

Installation

Get up and running in minutes.

Requirements: Node.js 18+ and npm 9+ (or yarn/pnpm)

Step 1: Extract the Package

After download, extract the ZIP file to your desired location.

Step 2: Install Dependencies

cd adminex-vue
npm install

Step 3: Start Development Server

npm run dev

Your app will be running at http://localhost:5173

Step 4: Build for Production

npm run build
npm run preview

Folder Structure

Organized and scalable architecture.

adminex-vue/
├── public/
│   └── assets/           # Static assets
│       ├── avatars/
│       ├── blogs/
│       ├── products/
│       └── logo/
├── src/
│   ├── components/       # Reusable components
│   │   ├── charts/
│   │   ├── common/
│   │   └── dashboard/
│   ├── composables/      # Vue composables
│   ├── data/             # Mock data
│   ├── features/         # Advanced feature modules
│   │   ├── approval-engine/
│   │   ├── notification-pipeline/
│   │   ├── query-builder/
│   │   ├── real-time-simulation/
│   │   ├── rule-engine/
│   │   ├── smart-insights/
│   │   ├── task-scheduler/
│   │   └── workflow-builder/
│   ├── i18n/             # Locale JSON files
│   │   └── locales/
│   ├── layouts/          # Page layouts
│   ├── pages/            # Page components
│   ├── router/           # Vue Router config
│   ├── stores/           # Pinia stores
│   ├── styles/           # Global CSS
│   └── types/            # TypeScript types
├── docs/                 # Developer markdown docs
├── documentation/        # Buyer HTML documentation
├── package.json
├── vite.config.ts
└── tsconfig.json

Key Features

Everything you need to build amazing admin apps — and more.

8 Advanced Features

Rule Engine, Workflow Builder, Task Scheduler & more.

Fully Responsive

Works on all screen sizes from mobile to 4K.

Dark Mode

Beautiful dark theme with one-click toggle.

10 Languages

Built-in i18n with RTL support.

6 Color Themes

Blue, Purple, Green, Orange, Red, Cyan.

7+ Chart Types

Area, Bar, Line, Pie, Radar, Candlestick & more.

RTL Support

Full right-to-left support for Arabic, Urdu, Hebrew.

Dashboards

4 unique dashboard layouts.

Analytics

Website statistics

CRM

Customer management

Ecommerce

Store management

Project

Project management

Applications

8 full-featured applications.

Chat

Email

Calendar

Kanban

Notes

Contacts

Ecommerce

Blog

Advanced Features

8 complex logic features with production-grade architecture — not just UI, but real engines and builders.

Rule Engine

Visual rule builder with conditional logic, nested groups, and real-time evaluation.

Query Builder

Dynamic query construction with drag-and-drop fields, operators, and SQL/JSON preview.

Real-Time Simulation

Live data streaming dashboard with configurable sources and real-time charts.

Smart Insights

AI-powered analytics with anomaly detection, trend analysis, and actionable recommendations.

Workflow Builder

Visual workflow designer with node-based canvas, templates, and conditional branching.

Approval Engine

State machine-powered approval workflows with role-based routing and audit trails.

Task Scheduler

Advanced task management with Gantt charts, dependency graphs, and cron scheduling.

Notification Pipeline

Multi-channel notification system with templates, routing rules, and delivery tracking.

Feature Architecture

Each feature follows a modular, self-contained architecture:

src/features/{feature-name}/
├── types.ts          # TypeScript interfaces
├── engine.ts         # Core business logic
├── config.ts         # Default configurations
├── use{Feature}.ts   # Vue composable
└── components/       # Feature UI components
    ├── {Feature}Dashboard.vue
    └── ...

Theming

6 built-in color themes with customizable CSS variables.

Available Color Themes

Blue

#3b82f6

Default theme

Purple

#ec4899

Pink-based palette

Green

#22c55e

Fresh & eco-friendly

Orange

#f97316

Warm & energetic

Red

#ef4444

Bold & attention-grabbing

Cyan

#06b6d4

Cool & modern

Change Theme Color

import { useTheme } from '@/composables/useTheme';

const { setColor } = useTheme();

// Change to any available theme
setColor('blue');    // Default
setColor('purple');  // Pink-based
setColor('green');   // Fresh
setColor('orange');  // Warm
setColor('red');     // Bold
setColor('cyan');    // Cool

Theme Implementation

Colors are defined in src/types/theme.ts and applied via CSS variables:

--theme-primary - Main theme color
--theme-accent - Complementary accent color
Persists to localStorage automatically
Works seamlessly with dark mode

Dark Mode

Light or Dark mode with persistent preference.

Toggle Dark Mode

import { useTheme } from '@/composables/useTheme';

const { setMode } = useTheme();

setMode('dark');   // Dark
setMode('light');  // Light

RTL Support

Right-to-left language support.

import { useTheme } from '@/composables/useTheme';

const { setDirection } = useTheme();

setDirection('rtl');  // RTL
setDirection('ltr');  // LTR

Languages

10 built-in languages.

🇺🇸English

🇪🇸Spanish

🇫🇷French

🇵🇹Portuguese

🇨🇳Chinese

🇯🇵Japanese

🇷🇺Russian

🇸🇦Arabic

🇮🇳Hindi

🇵🇰Urdu

Add New Language

// 1. Create: src/i18n/locales/ko.json
// 2. Register in src/stores/locale.ts
import koMessages from '@/i18n/locales/ko.json';

type Locale = 'en' | ... | 'ko';
const MESSAGES = { ...existingLocales, ko: koMessages };

Changelog

Version history.

Version 1.0.0

Latest

May 31, 2026

Initial Vue 3 release:

4 Dashboard variants
8 Full applications
8 Advanced features (Rule Engine, Query Builder, Real-Time Simulation, Smart Insights, Workflow Builder, Approval Engine, Task Scheduler, Notification Pipeline)
7 Chart types
Dark mode support
10 Languages with RTL
6 Color themes
Vue 3 + Pinia + Vue Router architecture
70 AI-generated images