VueViteAdmin dashboard

admin-element-vue — Vue Admin dashboard Template

By lqsong

A Vue 3, Vite, Pinia, and Element Plus admin frontend template with built-in dynamic routing, permission verification, internationalization, and mock data.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-08View source

What stands out

A quick read of the recorded project description.

01

Admin frontend template built with Vue 3, Vite, Pinia, and Element Plus

02

Built-in dynamic routing and permission verification

03

Supports internationalization and mock data

04

Provides both webpack and Vite version branches

05

Includes an online demo and usage documentation

06

Code is under the MIT license, allowing commercial use and distribution

Template Details

The vite.ts2 branch of admin-element-vue is an admin frontend solution built on the Frame-Template-Vue framework and Element Plus UI components. It combines Vue 3, Vite, Pinia, and Element Plus, and provides capabilities such as dynamic routing, permission verification, internationalization, and mock data. The repository also offers a webpack version; this branch is the Vite + Vue 3 + Pinia + Element Plus version.

The template includes an online demo and usage documentation. The demo environment uses an online mock service, and the README notes that this service is unstable; if online login fails, you can pull the code locally and run it directly to view it. The project requires pnpm for dependency installation and local development.

The code is under the MIT license and can be used, modified, commercialized, and distributed for free, but third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses, and external services such as domains, hosting, and databases may incur separate charges.

VueViteAdmin

Is it right for your project?

Use Cases

  • Building an admin management interface that requires login and permission control
  • Introducing the Element Plus component library as a UI foundation in a Vue 3 project
  • Admin frontend development that needs dynamic routing and internationalization support
  • Using mock data for early integration during frontend-backend separated development

Suitable For

  • Frontend developers using the Vue 3 and Element Plus stack
  • Frontend teams that need an admin template to quickly start a project
  • Developers who want to reference implementations of dynamic routing, permission verification, and internationalization

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    The project requires pnpm to install dependencies; run pnpm i and then pnpm dev to start local development

  2. 2

    The online demo uses an online mock service, which the README notes is unstable; if login fails, pull the code locally and run it

  3. 3

    Before use, check the licenses of third-party assets such as demo images, fonts, and icons; do not judge solely based on the code's MIT license

  4. 4

    When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope applies to that version's code and does not mean external services or third-party assets are free.

Must comply with when using

  • The code of this version may be used, modified, commercialized, and distributed for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses; do not judge solely based on the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
  • The online demo relies on an online mock service, and the README explicitly states that this service is unstable; if online login fails, you need to pull the code locally and run it to view the demo.
  • The project requires pnpm as the package manager for dependency installation and local development; otherwise, installation or running may fail.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

**注意:Demo 用的是在线 mock 服务,不稳定,若在线登录不了 pull 到本地可直接运行查看 demo**

Original README

> 请使用 pnpm , **[pnpm 的安装与使用](http://liqingsong.cc/article/detail/26)** 。

Original README
https://github.com/lqsong/admin-element-vue/blob/vite.ts2/LICENSEhttps://github.com/lqsong/admin-element-vue/blob/vite.ts2/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-08. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 81 / 100
Technologies
Vue · Vite
Website type
Admin dashboard
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2024-04-19
Screenshot last checked
2026-10-08

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Vue as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-08

Inspect the recorded source material

SHA-256: 00253d1ed1384bcfccb1c2a31a37a12a1195a9f5cb7ff13dbc437107d716ac7d

2026-10-08T12:39:05.548Z

Source file / repository
# admin-element-vue-vite-ts2

此分支是 Vite + Vue3.x + Pinia + Element Plus 版本 , 其他版本请点击其他分支查看。

`admin-element-vue-vite-ts2` 是一个后台前端解决方案,它基于[Frame-Template-Vue](http://frame-template-vue.liqingsong.cc/)框架 、[Element Plus](https://github.com/element-plus/element-plus) UI 组件实现。它使用了最新的前端技术栈、动态路由、权限验证、国际化、Mock 数据等。

## Demo

**注意:Demo 用的是在线 mock 服务,不稳定,若在线登录不了 pull 到本地可直接运行查看 demo**

| **[Demo(点击此处)](http://vitets2-demo.admin-element-vue.liqingsong.cc/)** |
:-------------------------:
| ![Home](http://admin-element-vue.liqingsong.cc/vitets2/images/demo/1.jpg) |
| ![Home](http://admin-element-vue.liqingsong.cc/vitets2/images/demo/1-white.jpg) |
| ![Home](http://admin-element-vue.liqingsong.cc/vitets2/images/demo/2.jpg) |
| ![Home](http://admin-element-vue.liqingsong.cc/vitets2/images/demo/2-white.jpg) |
| ![Home](http://admin-element-vue.liqingsong.cc/vitets2/images/demo/3-1.jpg) |
| ![Home](http://admin-element-vue.liqingsong.cc/vitets2/images/demo/3-2.jpg) |

## 使用文档

- [http://admin-element-vue.liqingsong.cc/vitets2/](http://admin-element-vue.liqingsong.cc/vitets2/)
- [Github](https://github.com/lqsong/admin-element-vue)
- [Gitee](https://gitee.com/lqsong/admin-element-vue)

## 框架模板

- frame-template-vue([GitHub](https://github.com/lqsong/frame-template-vue)、[Gitee](https://gitee.com/lqsong/frame-template-vue))

## 后台前端解决方案列表

- admin-element-vue([GitHub](https://github.com/lqsong/admin-element-vue)、[Gitee](https://gitee.com/lqsong/admin-element-vue))
- admin-antd-vue([GitHub](https://github.com/lqsong/admin-antd-vue)、[Gitee](https://gitee.com/lqsong/admin-antd-vue))
- admin-antd-react([GitHub](https://github.com/lqsong/admin-antd-react)、[Gitee](https://gitee.com/lqsong/admin-antd-react))
- electron-admin-element-vue([GitHub](https://github.com/lqsong/electron-admin-element-vue)、[Gitee](https://gitee.com/lqsong/electron-admin-element-vue))
- electron-admin-antd-vue([GitHub](https://github.com/lqsong/electron-admin-antd-vue)、[Gitee](https://gitee.com/lqsong/electron-admin-antd-vue))
- electron-admin-antd-react([GitHub](https://github.com/lqsong/electron-admin-antd-react)、[Gitee](https://gitee.com/lqsong/electron-admin-antd-react))
- admin-vue3-micro-qiankun([GitHub](https://github.com/lqsong/admin-vue3-micro-qiankun)、[Gitee](https://gitee.com/lqsong/admin-vue3-micro-qiankun))

## 前台前端解决方案列表

- template-vant-vue([GitHub](https://github.com/lqsong/template-vant-vue)、[Gitee](https://gitee.com/lqsong/template-vant-vue))

## 前台前端 SSR 解决方案列表

- midway-vue3-ssr([GitHub](https://github.com/lqsong/midway-vue3-ssr)、[Gitee](https://gitee.com/lqsong/midway-vue3-ssr))
- midway-react-ssr([GitHub](https://github.com/lqsong/midway-react-ssr)、[Gitee](https://gitee.com/lqsong/midway-react-ssr))

## 快速入门

> 请使用 pnpm , **[pnpm 的安装与使用](http://liqingsong.cc/article/detail/26)** 。

### 本地开发

```bash
$ pnpm i
$ pnpm dev
```

## 捐赠

如果你觉得这个项目帮助到了你,请帮助点击 Star,你也可以请作者喝咖啡表示鼓励.

|                                        **ALIPAY**                                         |                                        **WECHAT**                                         |
| :---------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: |
| ![Alipay](http://uploads.liqingsong.cc/20210430/f62d2436-8d92-407d-977f-35f1e4b891fc.png) | ![Wechat](http://uploads.liqingsong.cc/20210430/3e24efa9-8e79-4606-9bd9-8215ce1235ac.png) |
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.