🌏 Live Demo · 🌑 Dark Mode · Persian · Chinese
🌏 Live Demo · 🌑 Dark Mode · Persian · Chinese
## Table of contents
- [Yummy Admin](#yummy-admin)
- [Table of contents](#table-of-contents)
- [Overview](#overview)
- [Features](#features)
- [Charts](#charts)
- [Tech stack](#tech-stack)
- [Getting started](#getting-started)
- [Scripts](#scripts)
- [Project structure](#project-structure)
- [Theming \& tokens](#theming--tokens)
- [Internationalization](#internationalization)
- [Deployment](#deployment)
- [Using this as a template](#using-this-as-a-template)
- [Support](#support)
- [License](#license)
## Overview
Yummy Admin is a production-shaped admin panel for e-commerce back offices: products, categories, brands, colors, orders, customers, invoices, reviews, comments, analytics and settings — all wired to a mockable API layer so the UI is fully explorable without a backend.
It ships with full **RTL** layout support, **three locales**, a runtime **theme colour picker**, dark/light modes, and a component gallery (forms, typography, charts) that doubles as living documentation.
## Features
**Framework & developer experience**
- ⚡️ **Vue 3.5 + Vite (rolldown) + TypeScript** — fast dev server and fast builds
- 🗂 **File-based routing** via `vite-plugin-pages`, with a Nuxt-style **layout system**
- 📦 **Auto-imports** for components, composables, stores and Vue APIs
- 🧩 **Vue Macros** (`defineOptions`, `defineSlots`, …) enabled out of the box
- 🎨 **UnoCSS** with attributify mode and the web-fonts preset
- 🧹 **Biome** for lint/format, enforced on commit through **Lefthook**
**UI & theming**
- 🖼 **[Naive UI](https://www.naiveui.com) 2** component library with runtime theme overrides
- 🌗 **Dark / light / follow-system** modes
- 🎨 **Runtime theme colour** — switching the accent repaints Naive UI *and* every chart
- ↔️ **Full RTL support**, not an afterthought: mirrored layout, RTL-aware Naive UI styles, and locale-aware chart legends (including ECharts canvases)
**Data & state**
- 🍍 **Pinia** with `pinia-plugin-persistedstate` for durable UI preferences
- 🎭 **[MSW](https://mswjs.io/) + Faker** — a production-like REST API with realistic latency in the browser, zero backend required
- 🔌 **Axios**-based service layer (`src/common/api`) with a typed `ApiService`
- 🔌 **WebSocket**-backed chat app
**E-commerce ready**
- 🛒 Products, categories, brands, colors, orders, customers, invoices, reviews and comments screens
- 📊 Dashboards for **E-commerce** and **Analytics** with KPI cards and sparklines
- 🧾 Data tables with filtering, sorting, pagination and bulk actions
## Charts
Charts are built on **[Apache ECharts 6](https://echarts.apache.org)** through the **[uipkge](https://uipkge.dev/vue/charts) chart registry** — a set of copy-paste, theme-token-driven ECharts wrappers.
**Why uipkge instead of`apexcharts`?**
| | ApexCharts (previous) | uipkge + ECharts (current) |
| --------------------- | --------------------------------------- | ------------------------------------------------------ |
| Distribution | npm dependency, options-object API | Registry source vendored into `src/`, yours to edit |
| Extensibility | Limited to Apex's option surface | Full ECharts option escape hatch per chart |
| Chart families | ~20 | 66 — cartesian, circular, hierarchy, flow, distribution, maps |
| Theming | CSS-var options per chart | `--chart-1..5` tokens resolved at runtime |
| Dark mode / accent | Manual overrides | Automatic — one token change repaints every canvas |
The primitives live in **`src/components/ui/charts/`** (see its [README](./src/components/ui/charts/README.md) for provenance and the substitutions applied for this project). The app-facing wrappers stay in `src/components/Charts/chart-components/`, so **page code was not affected by the migration**.
```vue