1. Project Overview

Vue Naive Admin

Lightweight, simple, and elegant! Vue3 Admin Dashboard Template

Built with the latest technology stack, ready to use out of the box, with an extremely low learning curve, allowing you to focus on business development. Open source, free, and commercially usable!

Vue Naive Admin is a minimalist-style admin dashboard template that includes both frontend and backend solutions. The frontend uses Vite + Vue3 + Pinia + Unocss, while the backend uses Nestjs + TypeOrm + MySql. It is simple to use and visually appealing, having undergone more than ten rounds of refactoring and detail polishing. A carefully crafted solution!

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Design philosophy

Vue Naive Admin was open-sourced in February 2022. From version 1.0 to the current 2.0, it has consistently followed the philosophy that simplicity is the ultimate virtue. It aims to help small and medium-sized businesses, university students, and individual developers quickly get started with admin dashboard development. To reduce the learning curve, it deliberately avoids using the seemingly mainstream TypeScript (frontend), making Vue Naive Admin one of the few Vue3 admin dashboard templates on the market that uses JavaScript. It has also proven to be an excellent solution, earning recognition and appreciation from many users.

Features

• Use Vue3 Latest mainstream technology stack: Vite + Vue3 + Pinia
• Use Atomic CSSFramework: Unocss, elegant, lightweight, and easy to use
• Integrated Pinia state management with support for state persistence
• Uses the mainstream Iconify + Unocss icon solution, supporting custom icons and dynamic rendering
• Uses Naive UI, featuring an extremely concise coding style and clean page design, refined aesthetics, and easy theme customization
• An advanced and easy-to-understand file structure design, with multiple modulesZero coupling, deleting an individual business module does not affect other modules
• Flat route design where every component can be a page, eliminating the difficulty of implementing KeepAlive with deeply nested routes
• Dynamically generates routes based on permissions without requiring additional route definitions. The 403 and 404 pages are distinguished, so users without permission are not incorrectly redirected to a 404 page
• Integrated with Redis for seamless token refresh, controllable user login sessions, and a balance of security and user experience
• A global message utility built on Naive UI, supporting batch notifications and a cross-page singleton mode.
• A collection of commonly used business components built on Naive UI, including Page components, CRUD table components, Modal components, and more. Easy to use and designed to reduce repetitive development work.

5. Tech Stack

Quick Start

Environment Preparation

Node.js: Version 18.18 or higher is required. Odd-numbered versions such as 19 and 21 are not recommended.

Package manager: pnpm is recommended. If it is not installed, run the following command to install it.

npm i -g pnpm

MySQL: If you are unfamiliar with backend development, it is recommended to use the same 5.7 version as this project.

Redis: Version 6 or higher.

TIP

MySQL and Redis can be installed locally or used as services already installed on a cloud server. Choose whichever works best for you.

Development Tools Preparation

Git: Essential for development. No further introduction needed.

IDE: VS Code is recommended.

Extensions: If you are using vscode, you can quickly install the recommended extensions using the list provided in the project code.

Local run

Backend

1. Install dependencies

npm i

2. Create a database named isme, or choose a custom name.

3. Execute the initialization SQL script in the newly created database. The file is init.sql in the project root directory.

4. Update the database connection settings in the .env file in the project root directory with your own configuration.

5. Start the application

npm run start:dev

Frontend

1. Install dependencies

pnpm i

2. Start the application

npm run dev