Soybean Admin — Fresh Vue 3 Admin with Naive UI and Clean Architecture

Introduction

Soybean Admin is a clean and modern Vue 3 admin template that uses Naive UI for components, Vite for tooling, and TypeScript for type safety. It focuses on developer experience with clear code organization, strong conventions, and a gentle learning curve for teams starting new admin projects.

What Soybean Admin Does

• Provides a complete admin framework with dynamic routing and permission control
• Uses Naive UI components for a fresh, modern visual appearance
• Implements both flat and tree-structured menu configurations
• Supports front-end and backend permission modes with seamless switching
• Includes UnoCSS for atomic styling and iconify for icon management

Architecture Overview

The project follows a feature-based folder structure with clear separation between views, stores (Pinia), services, and utilities. Route configuration supports both static definition and dynamic generation from API responses. The request layer wraps Axios with automatic token injection, error handling, and retry logic. State management leverages Pinia with persistence plugins.

Self-Hosting & Configuration

• Requires Node.js 18+ and pnpm as the package manager
• Environment files control API base URL, app title, and feature flags
• Menu and route permissions are configurable via front-end constants or backend APIs
• Theme tokens (primary color, border radius) are adjustable in the settings panel
• Build output deploys as static files to Nginx, Vercel, or any CDN

Key Features

• Clean, well-organized codebase with strict TypeScript and ESLint rules
• UnoCSS integration for utility-first styling without CSS file sprawl
• System-level dark mode with automatic OS preference detection
• Multi-tab navigation with cached page state and context menus
• Mobile-responsive layout with collapsible sidebar

Comparison with Similar Tools

• vue-vben-admin — More features but heavier; Soybean is lighter and easier to learn
• vue-pure-admin — Similar philosophy but uses Element Plus instead of Naive UI
• Naive UI Admin — Even more minimal, fewer built-in pages and conventions
• vue-element-admin — Vue 2 classic, battle-tested but outdated tech stack
• Ant Design Pro Vue — Ant ecosystem, heavier conventions and larger bundles

FAQ

Q: Why Naive UI instead of Element Plus? A: Naive UI offers a modern design language, complete TypeScript support, and tree-shakeable components with smaller bundle sizes.

Q: Can I switch to Element Plus or Ant Design Vue? A: The framework is coupled to Naive UI for built-in components. Switching requires replacing component imports across all pages.

Q: How are permissions configured? A: Two modes exist: static (roles defined in route meta) and dynamic (menus fetched from backend API after login). Switch via an environment variable.

Q: Is there a Go or Java backend template? A: Community backend companions exist for Go (Gin), Java (Spring Boot), and Node.js (NestJS) that implement the expected API contract.

Sources

• https://github.com/soybeanjs/soybean-admin
• https://docs.soybeanjs.cn/