analytics

vue-element-admin

Name: vue-element-admin
Author: PanJiaChen

:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

90,156 stars30,270 forksVueUpdated 10/24/2024100% free · open source

What it does

A ready‑to‑go Vue + Element‑UI admin dashboard template you can clone and run instantly to power internal tools or SaaS back‑ends.

When to use it

•You need a full‑featured admin UI (tables, charts, auth) and don’t want to build it from scratch.
•Your team works in Vue and wants a proven layout, router, and state‑management setup out of the box.
•You want a starter that already includes mock APIs, permission control, and responsive design.

Ready-to-paste prompt

npm run plop   # then select "view" → name "UserAnalytics" → choose "table" layout – the generator will create src/views/userAnalytics/index.vue and automatically register the route and sidebar menu.

Heads up: The project requires Node >= 8.0 and npm >= 5.0; using an older Node version will cause “Cannot find module ‘@babel/runtime’” errors. Also, the dev server expects port 9528 for the mock API – if that port is already in use, the UI will fail to load data.

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🛠️ Technical setup

Expect 20–40 minutes in a terminal — or let your AI agent drive it.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/vue-element-admin && curl -fsSL https://workflowstacks.com/api/skills/vue-element-admin/claude-skill -o ~/.claude/skills/vue-element-admin/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How vue-element-admin works

Codeflow

Free to inspect

Vue-element-admin is a medium Vue project (~13k lines across 211 code files, plus 7 test files). Expect some technical setup — comfortable with a terminal, or ask a developer. Last commit 22 months ago, MIT license, has a test suite.

Size

Medium codebase

~13k lines · 211 code files · ~2 h to skim

Setup

Some technical setup

Comfortable with a terminal? 20–40 min. Otherwise ask a dev.

Runs on

Node.js

No API keys detected

Vue 69%JavaScript 26%SCSS 4%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
src/main.js
Where the program starts running
3
package.json
Dependencies and the commands it exposes
4
src/App.vue
Inside src/ — the main logic begins here

What's in each folder

src/Core code — the actual logic256 files

mock/Folder8 files

plop-templates/Folder7 files

tests/Tests — proof it works7 files

.github/CI / automation (GitHub Actions)4 files

public/Images & static assets2 files

READMEHas testsDocumentedCI checksMIT licenseLast update 22 mo ago

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🛠️ Technical setup

Expect 20–40 minutes in a terminal — or let your AI agent drive it.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/vue-element-admin && curl -fsSL https://workflowstacks.com/api/skills/vue-element-admin/claude-skill -o ~/.claude/skills/vue-element-admin/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

PanJiaChen

Language

Vue