# Vue project architecture examples

Interactive architecture diagrams of 69 open-source Vue repositories with a GitDiagram architecture diagram, most stars first. Each diagram shows the project's main components, how they connect, and links every part to its file on GitHub.

## Repositories 1 to 50 of 69

1. [panjiachen/vue-element-admin](https://gitdiagram.com/panjiachen/vue-element-admin) (90.2k stars): vue-element-admin is a Vue-based admin-interface solution. Markdown: https://gitdiagram.com/panjiachen/vue-element-admin.md
2. [elemefe/element](https://gitdiagram.com/elemefe/element) (54.2k stars): The project is a Vue.js (version 2.0) UI component library. Markdown: https://gitdiagram.com/elemefe/element.md
3. [bailicangdu/vue2-elm](https://gitdiagram.com/bailicangdu/vue2-elm) (41.1k stars) Markdown: https://gitdiagram.com/bailicangdu/vue2-elm.md
4. [corentinth/it-tools](https://gitdiagram.com/corentinth/it-tools) (37.8k stars): This is a single‐page application (SPA) built with Vue 3 + TypeScript, bundled by Vite, and published as a static site (Docker + Nginx or Vercel/Netlify). Markdown: https://gitdiagram.com/corentinth/it-tools.md
5. [qier222/yesplaymusic](https://gitdiagram.com/qier222/yesplaymusic) (33.3k stars): YesPlayMusic is a Vue-based third-party NetEase Music client, with browser/PWA and Electron modes. Markdown: https://gitdiagram.com/qier222/yesplaymusic.md
6. [chanzhaoyu/chatgpt-web](https://gitdiagram.com/chanzhaoyu/chatgpt-web) (31.4k stars): ChatGPT Web is a Vue chat application backed by an Express service. Markdown: https://gitdiagram.com/chanzhaoyu/chatgpt-web.md
7. [lissy93/dashy](https://gitdiagram.com/lissy93/dashy) (26.5k stars): Dashy is a customizable self-hosted homepage. Markdown: https://gitdiagram.com/lissy93/dashy.md
8. [automaapp/automa](https://gitdiagram.com/automaapp/automa) (21.5k stars): Automa is a Chrome/Firefox browser extension for building, scheduling, and running block-connected browser automations: form filling, scraping, screenshots, and data workflows. Markdown: https://gitdiagram.com/automaapp/automa.md
9. [vuecomponent/ant-design-vue](https://gitdiagram.com/vuecomponent/ant-design-vue) (21.4k stars): Build and Tooling Infrastructure – Look at the “antd-tools” folder and the various configuration files (e.g., babel.config.js, webpack.build.conf.js, tsconfig.json, .eslint*… Markdown: https://gitdiagram.com/vuecomponent/ant-design-vue.md
10. [docmirror/dev-sidecar](https://gitdiagram.com/docmirror/dev-sidecar) (21.4k stars): GUI (Desktop Application): Found under packages/gui, this is the Electron-based frontend that provides the user interface, settings, and controls (e.g., enabling/disabling system… Markdown: https://gitdiagram.com/docmirror/dev-sidecar.md
11. [freetubeapp/freetube](https://gitdiagram.com/freetubeapp/freetube) (20.5k stars): – Located in the “src/main” folder (e.g., index.js, ImageCache.js, poTokenGenerator.js). Markdown: https://gitdiagram.com/freetubeapp/freetube.md
12. [pure-admin/vue-pure-admin](https://gitdiagram.com/pure-admin/vue-pure-admin) (20k stars): Below are specific guidelines and instructions tailored to this project. Markdown: https://gitdiagram.com/pure-admin/vue-pure-admin.md
13. [lin-xin/vue-manage-system](https://gitdiagram.com/lin-xin/vue-manage-system) (19.6k stars): This repository is a Vue 3 and Pinia admin-management frontend. Markdown: https://gitdiagram.com/lin-xin/vue-manage-system.md
14. [zxwk1998/vue-admin-better](https://gitdiagram.com/zxwk1998/vue-admin-better) (18.8k stars): This is a Vue.js-based admin dashboard framework (vue-admin-better) with both free and paid versions, focusing on providing a comprehensive administrative interface with RBAC… Markdown: https://gitdiagram.com/zxwk1998/vue-admin-better.md
15. [algerkong/algermusicplayer](https://gitdiagram.com/algerkong/algermusicplayer) (16.8k stars): Alger Music Player is a Vue/Electron music player with desktop, web, and mobile interfaces. Markdown: https://gitdiagram.com/algerkong/algermusicplayer.md
16. [iview/iview-admin](https://gitdiagram.com/iview/iview-admin) (16.4k stars): UI Components & Views: Show a clear separation between reusable components (found in src/components) and the larger views/pages (found in src/view). Markdown: https://gitdiagram.com/iview/iview-admin.md
17. [hunlongyu/zy-player](https://gitdiagram.com/hunlongyu/zy-player) (14.5k stars): ZY Player is a desktop resource and IPTV media player. Markdown: https://gitdiagram.com/hunlongyu/zy-player.md
18. [primefaces/primevue](https://gitdiagram.com/primefaces/primevue) (14.4k stars): PrimeVue is a Vue component library and monorepo ecosystem: applications use its UI components and supporting APIs, with optional forms, themes, icons, Nuxt integration… Markdown: https://gitdiagram.com/primefaces/primevue.md
19. [tiny-craft/tiny-rdm](https://gitdiagram.com/tiny-craft/tiny-rdm) (13.1k stars): Tiny RDM is a cross-platform Redis desktop manager with a deployable web mode. Markdown: https://gitdiagram.com/tiny-craft/tiny-rdm.md
20. [macrozheng/mall-admin-web](https://gitdiagram.com/macrozheng/mall-admin-web) (12.5k stars) Markdown: https://gitdiagram.com/macrozheng/mall-admin-web.md
21. [bastienwirtz/homer](https://gitdiagram.com/bastienwirtz/homer) (11.6k stars): Homer is a static Vue home-server dashboard. Markdown: https://gitdiagram.com/bastienwirtz/homer.md
22. [zyronon/douyin](https://gitdiagram.com/zyronon/douyin) (11.5k stars): Douyin-Vue is a mobile Vue imitation of TikTok, centered on browsing short videos and navigating into social, profile, messaging, music, and shopping experiences. Markdown: https://gitdiagram.com/zyronon/douyin.md
23. [epicmaxco/vuestic-admin](https://gitdiagram.com/epicmaxco/vuestic-admin) (11k stars) Markdown: https://gitdiagram.com/epicmaxco/vuestic-admin.md
24. [teampiped/piped](https://gitdiagram.com/teampiped/piped) (9.9k stars): Vue.js Application (evident from .vue files in src/components) Markdown: https://gitdiagram.com/teampiped/piped.md
25. [crmeb/crmeb](https://gitdiagram.com/crmeb/crmeb) (9.4k stars): CRMEB is a multi-channel PHP e-commerce platform: shoppers browse products, manage carts, place and pay for orders, and use account and promotion features; merchants operate the… Markdown: https://gitdiagram.com/crmeb/crmeb.md
26. [jiangrui1994/cloudsaver](https://gitdiagram.com/jiangrui1994/cloudsaver) (8.7k stars): CloudSaver is a full-stack web application (monorepo managed by pnpm) combining a Vue 3 + TypeScript frontend with an Express + TypeScript backend and SQLite3 for persistence. Markdown: https://gitdiagram.com/jiangrui1994/cloudsaver.md
27. [pipipi-pikachu/pptist](https://gitdiagram.com/pipipi-pikachu/pptist) (8.7k stars): PPTist is a front-end, single-page application (SPA) that emulates Microsoft PowerPoint’s features. Markdown: https://gitdiagram.com/pipipi-pikachu/pptist.md
28. [halseyspicy/geeker-admin](https://gitdiagram.com/halseyspicy/geeker-admin) (8.1k stars): Geeker-Admin is a Vue-based administrative dashboard framework. Markdown: https://gitdiagram.com/halseyspicy/geeker-admin.md
29. [thinkgem/jeesite](https://gitdiagram.com/thinkgem/jeesite) (8k stars): This is a frontend monorepo for the JeeSite rapid‐development platform. Markdown: https://gitdiagram.com/thinkgem/jeesite.md
30. [gui-for-cores/gui.for.singbox](https://gitdiagram.com/gui-for-cores/gui.for.singbox) (8k stars): GUI.for.SingBox is a cross-platform desktop GUI for configuring and operating the Sing-box proxy core. It is built with Wails: a Go native host embeds a Vue frontend. Markdown: https://gitdiagram.com/gui-for-cores/gui.for.singbox.md
31. [ikuaitu/vue-fabric-editor](https://gitdiagram.com/ikuaitu/vue-fabric-editor) (7.8k stars) Markdown: https://gitdiagram.com/ikuaitu/vue-fabric-editor.md
32. [zyronon/typewords](https://gitdiagram.com/zyronon/typewords) (7.7k stars): This is a front-end–only Single-Page Application (SPA) built with Vue (Composition API), Vite, and static hosting. Markdown: https://gitdiagram.com/zyronon/typewords.md
33. [hulaspark/hula](https://gitdiagram.com/hulaspark/hula) (7k stars): Frontend UI: The Vue 3 application found under the “src” directory. This includes components, layouts, hooks, stores, router configurations, and assets. Markdown: https://gitdiagram.com/hulaspark/hula.md
34. [un-pany/v3-admin-vite](https://gitdiagram.com/un-pany/v3-admin-vite) (6.9k stars): Frontend UI Components: The core of the system is presented through Vue components. Organize them as. Markdown: https://gitdiagram.com/un-pany/v3-admin-vite.md
35. [yin-hongwei/music-website](https://gitdiagram.com/yin-hongwei/music-website) (6.6k stars): The music-website project is a full-stack music application that consists of three distinct modules. Markdown: https://gitdiagram.com/yin-hongwei/music-website.md
36. [luckjiawei/frpc-desktop](https://gitdiagram.com/luckjiawei/frpc-desktop) (6.6k stars): This is a cross-platform desktop application built with Electron. Markdown: https://gitdiagram.com/luckjiawei/frpc-desktop.md
37. [unovue/reka-ui](https://gitdiagram.com/unovue/reka-ui) (6.6k stars): - Reka UI is a Vue 3 component library monorepo centered on accessible, headless UI primitives. Markdown: https://gitdiagram.com/unovue/reka-ui.md
38. [yangzongzhuan/ruoyi-vue3](https://gitdiagram.com/yangzongzhuan/ruoyi-vue3) (6.5k stars): Based on our analysis of the provided file tree and the README, this project is the front‐end part of the RuoYi admin platform. Markdown: https://gitdiagram.com/yangzongzhuan/ruoyi-vue3.md
39. [unovue/radix-vue](https://gitdiagram.com/unovue/radix-vue) (6.3k stars) Markdown: https://gitdiagram.com/unovue/radix-vue.md
40. [elk-zone/elk](https://gitdiagram.com/elk-zone/elk) (6k stars): Elk is a full-stack web application and Progressive Web App (PWA) that serves as a Mastodon web client. Markdown: https://gitdiagram.com/elk-zone/elk.md
41. [jekip/naive-ui-admin](https://gitdiagram.com/jekip/naive-ui-admin) (5.8k stars): This is a modern, frontend-focused administrative platform designed for building enterprise-level mid/back-office applications. Markdown: https://gitdiagram.com/jekip/naive-ui-admin.md
42. [woai3c/visual-drag-demo](https://gitdiagram.com/woai3c/visual-drag-demo) (5.6k stars): Application Shell – This includes the main Vue application (src/main.js) with the global configuration and initialization. Markdown: https://gitdiagram.com/woai3c/visual-drag-demo.md
43. [opencsgs/csghub](https://gitdiagram.com/opencsgs/csghub) (5.5k stars): Vue.js-based web application (located in /frontend) Markdown: https://gitdiagram.com/opencsgs/csghub.md
44. [lostdesign/webgems](https://gitdiagram.com/lostdesign/webgems) (5.2k stars): webgems.io is a Nuxt resource directory for developers and designers. Markdown: https://gitdiagram.com/lostdesign/webgems.md
45. [tlbootcamp/tlroadmap](https://gitdiagram.com/tlbootcamp/tlroadmap) (5.1k stars): This is an open-source, static documentation website (“Teamlead Roadmap”) built with VuePress (Vue.js–based static site generator). Markdown: https://gitdiagram.com/tlbootcamp/tlroadmap.md
46. [daymychen/art-design-pro](https://gitdiagram.com/daymychen/art-design-pro) (5.1k stars): The Art Design Pro project is an open-source, frontend-admin dashboard system built with Vue 3, TypeScript, and Vite. Markdown: https://gitdiagram.com/daymychen/art-design-pro.md
47. [palxiao/poster-design](https://gitdiagram.com/palxiao/poster-design) (4.7k stars): Uses Vue3 for component-driven UI, Vite for a fast development build, and Pinia for state management. Markdown: https://gitdiagram.com/palxiao/poster-design.md
48. [unovue/inspira-ui](https://gitdiagram.com/unovue/inspira-ui) (4.6k stars): Frontend Application – This is built using Vue and Nuxt. It includes. Markdown: https://gitdiagram.com/unovue/inspira-ui.md
49. [realworld-apps/vue-realworld-example-app](https://gitdiagram.com/realworld-apps/vue-realworld-example-app) (4.1k stars): This is a Vue 3 RealWorld/Conduit frontend: users browse and paginate article feeds, open articles and profiles, authenticate, and create or edit articles and comments against a… Markdown: https://gitdiagram.com/realworld-apps/vue-realworld-example-app.md
50. [stylefeng/guns](https://gitdiagram.com/stylefeng/guns) (4k stars): Backend Server – located under “src/main/java/cn/stylefeng/guns” and related directories. Markdown: https://gitdiagram.com/stylefeng/guns.md

Next page: https://gitdiagram.com/architecture-examples/vue/2

More hubs: https://gitdiagram.com/architecture-examples

Counted over GitDiagram's stored diagrams of public repositories, from the names their components and groups carry and the files they link to; the rules are the ones in the [2026 open-source architecture report](https://gitdiagram.com/open-source-architecture-2026). Stars are GitHub's when the diagram was last made. Rebuilt daily: hubs grow as more repositories' languages are known.