Introducing Nova-admin: A Lightweight Vue3‑Based Backend Management Template

Before starting – The author discusses the motivation for creating a custom backend admin panel, noting problems with many open‑source projects such as outdated tech stacks, excessive abstraction, obscure dependencies, lack of simplicity for secondary development, and burdensome code‑style tooling.

Key concerns include:

Outdated tech stack : legacy dependencies are no longer upgraded, preventing out‑of‑the‑box usage and modern features.

Over‑encapsulation : layers of unnecessary abstraction make customization and debugging difficult.

Unclear third‑party wheels : old or poorly maintained libraries cause coupling and build issues.

Complexity vs. extensibility : large frameworks add mental overhead with tangled directories and files.

Code style enforcement : tools like eslint , prettier , stylelint , husky , and commitlint can become a burden for developers who just want to run the project.

The author argues that a good framework should balance providing sufficient features, being friendly to secondary development, and offering reusable component encapsulation.

Introduction

Nova‑admin is a backend management template built with Vue3, Vite5, TypeScript, and Naive UI. It aims for simplicity, clean code, minimal over‑encapsulation, and easy extensibility.

Features

Developed with the latest stack: Vue3, Vite5, TypeScript, Naive UI, Unocss.

Uses alova for unified request handling and multi‑scenario capabilities.

Comprehensive front‑and‑back end permission management.

Supports static routes and dynamic routes returned from the backend, with simple configuration.

Re‑packaged frequently used components to meet common needs.

Dark‑theme adaptation while keeping Naive UI style.

ESLint validation only on commit, without excessive restrictions.

Flexible, configurable UI layout.

Project Preview

Images of the Nova‑admin interface are displayed.

Open‑Source Repository

https://github.com/chansee97/nova-admin

References

[1] Nova‑admin: https://github.com/chansee97/nova-admin

[2] alova: https://alova.js.org/

[3] Nova‑admin demo: https://admin-nova.vercel.app/

Source: juejin.cn/post/7351581179017035810