SoybeanAdmin: A Fresh Vue 3 Admin Template That Actually Feels Modern

If you've ever tried building an admin dashboard from scratch, you know the pain. You either get a bloated Bootstrap mess or a half-baked starter that falls apart the moment you try to customize it. That's where SoybeanAdmin comes in.

This isn't just another Vue 3 admin template. It's a thoughtfully crafted starter that uses automated file-based routing — something we've seen in meta-frameworks like Nuxt or Next.js, but rarely in standalone Vue admin panels. Plus, it ships with a rich theme system that doesn't make you fight CSS variables to change a button color.

What It Does

SoybeanAdmin provides a complete admin dashboard UI built with Vue 3, TypeScript, and Vite. You get tables, forms, charts, authentication flows, and a layout system out of the box. But the two standout features are:

• File-based routing — Drop a Vue file into the pages folder, and the route is automatically generated. No manual route config, no repetitive boilerplate.
• Rich theme system — Multiple built-in themes, plus a visual editor to tweak colors, sidebar styles, header modes, and more, all persisted to localStorage.

It also includes:

• i18n support (with dynamic language switching)
• Role-based permission control
• API mocking with mockjs
• A built-in dark mode
• Redux-powered state management (via Pinia)

Why It's Cool

Let's be honest: admin templates are a dime a dozen. What makes SoybeanAdmin stand out is how it solves real problems.

Automated file routing is a game changer for team projects. When you're working on a large admin app with dozens of pages, manually updating a routes file every time you add a feature is tedious and error-prone. SoybeanAdmin's convention-based approach means you just drop files in folders, and routing happens. It's the same mental model as Nuxt or SvelteKit — but for a standalone Vue dashboard.

The theme system is actually useful. Most templates give you a dark mode toggle and call it a day. SoybeanAdmin gives you a visual theme builder where you can customize sidebar width, header style, page transitions, and even the border radius globally. It's like having Tailwind's config file, but with a GUI. And the fact that themes persist across sessions means your users (or your team) can pick their favorite setup once and never think about it again.

It's TypeScript-first and well-organized. The codebase is clean, modular, and follows Vue 3 best practices with Composition API. If you need to extend it, you won't feel like you're hacking into someone's unfinished hobby project.

How to Try It

You can spin up the demo instantly or clone the repo to play with it locally.

Live demo: https://soybean-admin-docs.netlify.app/

Local setup is dead simple:

git clone https://github.com/soybeanjs/soybean-admin.git
cd soybean-admin
pnpm install
pnpm dev

That's it. The dev server will start on localhost:3000 with file-based routing already active. Try renaming src/pages/dashboard/index.vue to something else — you'll see the route update instantly.

If you want to customize the theme, hover over the gear icon in the bottom-left of the sidebar and click the color palette icon. From there, you can tweak everything in real time.

Final Thoughts

SoybeanAdmin is a breath of fresh air in a stale corner of the frontend ecosystem. It doesn't try to be the next React or Svelte — it just wants to make building admin dashboards with Vue 3 less painful. The file-based routing and theme system alone are worth the download. If you're starting a new internal tool or replacing an old jQuery-based admin panel, give this a spin. It might save you hours of scaffolding.

Worth a ⭐ on GitHub if you find it useful.

Follow us for more open source gems: @githubprojects