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

Smart Insights — API Keys & External Costs

Smart Insights works out of the box with local heuristic analysis (no API keys required). If you connect a third-party AI provider (OpenAI, Anthropic, Google Gemini, etc.), you must supply your own API keys via environment variables. External AI usage may incur additional costs billed by the provider.

Tech Stack

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

Installation

Get up and running in minutes.

See the Requirements section for tested Node.js, npm, yarn, and pnpm versions.

Step 1: Extract the Package

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

Step 2: Install Dependencies

cd adminex-vue
npm install
# Or for reproducible CI installs:
npm ci

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
├── package-lock.json   # Lockfile for reproducible npm installs
├── 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

Heuristic analytics with anomaly detection and recommendations. Demo uses local analysis; optional third-party AI requires your own API keys.

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 };

Requirements

Use these tested versions for a smooth setup.

Tool	Minimum	Recommended
Node.js	20.19.0	22.12.0 LTS+
npm	10.0.0	10.8+
yarn	1.22.22	4.x
pnpm	9.0.0	10.x

Package manager commands

npm: npm install or npm ci (uses included package-lock.json)
yarn: yarn install
pnpm: pnpm install

Environment Variables

No environment variables are required to run the demo. Copy .env.example to .env when you need optional configuration.

Variable	Required	Description
VITE_APP_TITLE	No	Browser tab title (default: Adminex)
VITE_APP_BASE_URL	No	Public base path when deploying to a subdirectory
VITE_AI_API_KEY	No*	Your AI provider API key — only needed if you wire Smart Insights to a live AI backend
VITE_AI_API_URL	No*	AI provider endpoint URL (e.g. OpenAI-compatible API base URL)
VITE_AI_MODEL	No*	Model identifier (e.g. gpt-4o-mini) when using external AI

* Smart Insights demo mode does not require AI variables. External AI usage is billed by your provider.

Screenshots

Same dashboard and application previews shown on the landing page demos section.

Overview dashboard — light mode — Overview (Light)

Clean, bright layout for daily work

Overview dashboard — dark mode — Overview (Dark)

Optimized contrast for dark themes

Analytics dashboard — Analytics

KPIs, traffic sources, and trends

E-commerce dashboard — E-commerce

Orders, revenue, and conversion insights

CRM dashboard — CRM

Pipeline overview and deal tracking

Calendar application — Calendar

Schedule, events, and productivity

Admin Guide (Non-Technical)

A quick guide for team members who will use the admin UI without writing code.

1. Logging in

Open the app URL provided by your developer. Use the Login page — demo credentials are shown on-screen in development builds. In production, your team configures real authentication.

2. Navigating the sidebar

The left sidebar groups pages into Dashboards, Applications, Features, Forms, Tables, Charts, and Pages. Click any item to open that section. On mobile, tap the menu icon (☰) to show or hide the sidebar.

3. Changing appearance

Click the palette/settings icon in the header to open the Theme Customizer. Switch between light and dark mode, pick a color theme, change layout direction (LTR/RTL), and adjust sidebar layout. Preferences are saved automatically in your browser.

4. Changing language

Use the language selector in the header to switch between 10 supported languages. Arabic and Urdu enable right-to-left layout automatically.

5. Using demo applications

Email, Chat, Calendar, Contacts, Notes, Kanban, Blog, and E-commerce pages use sample data for demonstration. They show UI patterns your developer can connect to a real backend.

6. Advanced feature modules

Rule Engine, Query Builder, Workflow Builder, and similar pages are interactive demos of business logic tools. Use them to explore workflows before your development team integrates them with live data.

Troubleshooting

Common installation and runtime issues.

npm install fails with engine errors

Upgrade Node.js to 20.19+ or 22.12+. Check with node -v. Use nvm: nvm install 22

EACCES or permission denied during install

Do not use sudo npm install. Fix npm permissions or use a Node version manager (nvm, fnm, volta).

Port 5173 already in use

Stop the other process or run on a different port: npm run dev -- --port 3000

Blank page after npm run build

Set base in vite.config.ts if deploying to a subdirectory, or configure VITE_APP_BASE_URL.

TypeScript errors after modifying dependencies

Delete node_modules and reinstall with the included lockfile: npm ci

Found .DS_Store files (macOS)

These are macOS system files and are not part of the template. Delete any .DS_Store files if present. They are listed in .gitignore and should not be included when redistributing.

Smart Insights not returning AI responses

Demo mode uses local heuristics only. To use live AI, set VITE_AI_API_KEY and connect your backend — see Environment Variables.

FAQ

Frequently asked questions.

Does this include a backend?

No. Adminex Vue is a frontend template. All data is mock/sample data. Connect your own API or backend as needed.

Do I need API keys to get started?

No. Run npm install && npm run dev with no configuration. API keys are only required if you integrate external AI services for Smart Insights.

Which package manager should I use?

npm is recommended because package-lock.json is included. yarn and pnpm also work.

Can I use this in a commercial project?

Yes, per your CodeCanyon license. One regular license covers one end product.

How do I deploy to production?

Run npm run build. Upload the dist/ folder to any static host (Netlify, Vercel, Nginx, Apache, S3, etc.).

Where is the documentation?

Open documentation/index.html in your browser. Developer docs are in the docs/ folder.

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