Admin Dashboard UI Template Based on Vue + Vite + NaiveUI + UnoCSS
Create beautiful and simple admin dashboard UI projects quickly

Online Demo | Online Document

This is an open-source project based on the latest technology stack, aimed at providing a simple admin dashboard template. The project was initially created for educational purposes, featuring a clean design without complex encapsulations and advanced techniques, making it an excellent project for learning front-end technologies. The author is originally a backend developer who had to learn front-end development out of necessity, and hopes this project can be helpful to you.

English | 简体中文

Notice

This is merely a template project for an admin dashboard and does not implement full backend functionality. You can create a repository based on this template and implement your own admin dashboard.

⚠️ Important Reminder: We are currently in a phase of brainstorming and code revisions. It is not advisable to use this for real-world projects.

Features

• 🌟 Built with the latest and most popular front-end technologies
• 📐 Includes a comprehensive collection of common layout patterns
• 🔄 All layout patterns can be dynamically switched
• 🧩 Code structure is straightforward and easy to understand
• 📝 Fully documented with clear and comprehensive comments in both Chinese and English
• 🎨 Preserves the original characteristics of the component library (no theme overwriting, keeping the original style)

Characteristics

• ⚡️ Vue 3 - The latest version of Vue
• 🚀 Vite - Super fast development build tool
• 🎨 NaiveUI - An interesting Vue 3 component library
• 💅 UnoCSS - High-performance and extremely flexible instant atomic CSS engine
• 🧹 ESLint - Pre-configured rule set based on @antfu/eslint-config

Pre-configured

UI Framework

• NaiveUI - An interesting Vue 3 component library
• UnoCSS - High-performance and extremely flexible instant atomic CSS engine

Plugins

• Vue Router - Official router for Vue.js
• Pinia - Lightweight and flexible state management tool for Vue
• unplugin-vue-components - Automatically load components
• unplugin-auto-import - Automatically import Composition API, etc.
• VueUse - Collection of useful Composition API utilities
• Vue I18n - Internationalization support

Coding Style

• Use the Composition API with <script setup> syntax
• ESLint configured with the pre-configured rule set from @antfu/eslint-config

Development Tools

• pnpm - Fast and disk space efficient package manager
• Vite - Next-generation front-end toolchain
• Vue TSC - TypeScript compiler for Vue
• TypeScript - Superset of JavaScript

Try it now!

This project requires Node version >=14.18

GitHub Template

Create a repository using this template.

Clone to local

If you prefer a cleaner git history, you can do it manually:

npx degit lileyzhao/showy-naive-template your-vue-admin-template
cd your-vue-admin-template
pnpm i # If you haven't installed pnpm, run: npm install -g pnpm

Checklist

When using this template, try to update your own information correctly according to the checklist:

• Change the author name in LICENSE
• Change the title in index.html
• Change the project name and author in package.json
• Change the favicon in the public directory
• Clean up the README and CHANGELOG and remove irrelevant information

Then, enjoy :)

Usage

Development

To see it in action at http://localhost:4318, just run:

pnpm i
pnpm dev

Build

To build the application, run:

pnpm build

Then you will see the dist folder generated for publishing.

Preview

After building, you can preview the build locally by running:

pnpm preview

Deploy to Netlify

Go to Netlify and select your repository. Follow the instructions and your application will be created shortly.

Project Structure

.
├── public/               # Public resources
├── src/                  # Source code
│   ├── api-services/     # Backend APIs
│   ├── assets/           # Static assets
│   ├── layouts/          # Layouts
│   ├── modules/          # Modules
│   ├── router/           # Router
│   ├── setting/          # Configuration files
│   ├── shared/           # Shared classes
│   ├── store/            # State management
│   ├── utils/            # Utility functions
│   ├── views/            # Views
│   ├── App.vue           # Root component
│   └── main.ts           # Entry file
├── index.html            # Main HTML file
├── package.json          # Project information
├── vite.config.ts        # Vite configuration
├── uno.config            # UnoCSS configuration
└── tsconfig.json         # TypeScript configuration