armour/vue-typescript-admin-template

★ 5,685VueAudience · developerComplexity · 3/5LicenseSetup · easy

Mindmap

mindmap
  root((vue-ts-admin))
    What it does
      Admin dashboard starter
      Pre-built screens
      Role-based auth
    Tech stack
      Vue and TypeScript
      Element UI
      ECharts
    Features
      Rich text editors
      Excel and PDF export
      Drag-drop tables
    Use cases
      Back-office tools
      Internal apps
      Data dashboards

mindmap root((vue-ts-admin)) What it does Admin dashboard starter Pre-built screens Role-based auth Tech stack Vue and TypeScript Element UI ECharts Features Rich text editors Excel and PDF export Drag-drop tables Use cases Back-office tools Internal apps Data dashboards

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Use as a starting point for a back-office admin panel with login, role-based permissions, and multi-level sidebar already wired up.

USE CASE 2

Add charts, rich-text editors, and drag-and-drop tables to your admin app without building those components yourself.

USE CASE 3

Simulate API responses with the built-in mock server so front-end work can proceed without a real backend.

USE CASE 4

Export dashboard data to Excel or PDF directly from the template.

Tech stack

VueTypeScriptElement UIVue CLIEChartsMock.js

Getting it running

Difficulty · easy Time to first run · 5min

Standard yarn install and yarn serve, no external services or environment variables required to run the demo.

Use freely for any purpose, including commercial, as long as you keep the copyright notice.

In plain English

This is a starter template for building web-based admin dashboards using Vue.js and TypeScript. It provides a pre-built set of screens, components, and navigation patterns that developers can use as the foundation for an internal tool or back-office application, rather than building everything from scratch. The template is a TypeScript rewrite of a well-known JavaScript admin template called vue-element-admin. It uses the Element UI component library for its visual building blocks and Vue CLI 3 as the build system. A live demo and documentation site are both linked in the README. Out of the box it includes login and logout flows, role-based permission controls (including two-step login), a sidebar navigation system that supports multiple levels of nesting, and internationalization support for multiple languages. The dashboard also includes rich text, Markdown, and JSON editors, file upload and drag-and-drop components, charts via ECharts, and table components that support inline editing, dragging rows, and dynamic columns. For data handling during development, all API responses are simulated using a mock server included in the project, so you can build the front-end without needing a real backend. The project also supports exporting data to Excel files, generating PDFs, and compressing files to zip format. Setup follows a standard Node.js workflow: install dependencies with yarn, run a local development server, and build for production. It supports modern browsers and Internet Explorer 10 and above. The project is MIT licensed. This is a developer starting point, not an end-user product.

Copy-paste prompts

Prompt 1

Help me add a new page to vue-typescript-admin-template that shows a bar chart of monthly signups using ECharts.

Prompt 2

Show me how to add a new role in vue-typescript-admin-template so only users with that role can see a specific sidebar item.

Prompt 3

Write a mock API endpoint for vue-typescript-admin-template's mock server that returns a paginated list of users with name, email, and role.

Prompt 4

How do I connect vue-typescript-admin-template to a real REST API instead of the built-in mock server?

Prompt 5

Walk me through adding internationalization support for a new language in vue-typescript-admin-template.

Open on GitHub → Explain another repo

← armour on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.