soybeanjs/soybean-admin

★ 14,314TypeScriptAudience · developerComplexity · 3/5Setup · moderate

Mindmap

mindmap
  root((SoybeanAdmin))
    Features
      Theme options
      Multi-language
      Auto routing
      Access control
    Tech Stack
      Vue 3
      TypeScript
      Vite
      Pinia
    Use Cases
      Admin dashboards
      Back-office tools
      Management panels
    Setup
      Node 20 required
      pnpm workspace

mindmap root((SoybeanAdmin)) Features Theme options Multi-language Auto routing Access control Tech Stack Vue 3 TypeScript Vite Pinia Use Cases Admin dashboards Back-office tools Management panels Setup Node 20 required pnpm workspace

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Spin up a multi-language admin dashboard with built-in route-level access control in a day.

USE CASE 2

Build a back-office management panel with ready-made error pages, tab navigation, and mobile support.

USE CASE 3

Swap the UI component library from NaiveUI to Ant Design Vue or Element Plus without rewriting the template structure.

USE CASE 4

Use the automatic file-based routing system to add new admin pages without manual route registration.

Tech stack

Vue 3TypeScriptVitePiniaNaiveUIUnoCSSpnpm

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Node.js 20.19+ and pnpm 10.5+, primary documentation is in Chinese and may require translation.

In plain English

SoybeanAdmin is a ready-made starting point for building the back-office part of a web application. That is the admin dashboard where staff log in to manage data, users, and settings, rather than the public-facing site. Instead of building all of that from scratch, you start from this template and adapt it. The README is written mainly in Chinese, with an English version linked. The project is built on a set of current web tools. Vue 3 is a framework for building user interfaces, Vite is the build tool that compiles and serves the code, TypeScript is JavaScript with added type checking to catch mistakes earlier, Pinia manages shared application state, NaiveUI supplies the ready-made buttons and tables and other on-screen pieces, and UnoCSS handles styling. The code is organized as a pnpm monorepo, meaning several related packages live in one repository. The listed features include built-in theme options, multi-language support, and an automatic routing system that generates page navigation from the file layout. Access control supports both routes defined in the front end and routes supplied dynamically by a back-end server. The template ships with common pages such as 403, 404, and 500 error screens, along with layout and tab components, and it adapts to mobile screens. Separate editions are offered that swap NaiveUI for other component libraries called Ant Design Vue or Element Plus. To run it, the README says you need git, Node.js version 20.19 or higher, and the pnpm package manager version 10.5 or higher. You clone the repository, install dependencies with pnpm i, start a development server with pnpm dev, and produce a final build with pnpm build. The README also advertises paid services from the team, including custom admin development and enterprise outsourcing, and it lists related community projects such as a React version of the template.

Copy-paste prompts

Prompt 1

Using SoybeanAdmin as a base, add a new admin page that displays a table of orders fetched from a REST API with role-based access control.

Prompt 2

Show me how to add a second language to SoybeanAdmin's multi-language system and translate the sidebar menu items.

Prompt 3

How do I switch the SoybeanAdmin template from the NaiveUI edition to the Element Plus edition?

Prompt 4

Set up dynamic routes in SoybeanAdmin that are returned by the backend API based on the logged-in user's role.

Open on GitHub → Explain another repo

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

Verify against the repo before relying on details.