AdminVUE -VueJs Starter Admin Template with .NET Core 6

Description

If you are looking for a SPA admin template for your upcoming project then probably you come to the right place. AdminVUE is a single page admin template developed by Vue.js with .Net core 6 API. It’s covered most common features that you need to start a project.

Instead of developing a project from scratch, it’s always wise to start with already up & running product with minimal effort. The most amazing part of this template is, you have five popular Relational database connectivity options here. You have flexibility to choose Sql server, Mysql, Sqlite, PostgreSql and Oracle 12c+.

Are you stuck with setting up a SPA admin panel? AdminVUE starter admin template will right choice for you.

Live Demo

Documentation

Detailed Documentation

A well described documentation to guide you to set up for both windows and linux platform with all possible options and download links for resources you need.

Easy Customization

Both Client and Api project is modular, layered and maintained well naming convension pattern also used commenting to make codes more understandable.

Manage Users

Initially you will get two roles(Admin & User) but feel free to create more roles and assigned menus to manage your users.

Database Flexibility

As this template used dependency injection, you have flexibility to choose from all popular relational databases like sql server, mysql, oracle, progresql, sqlite etc.

Focus on security

You can feel secured from all un-wanted issues like SQL injection, CSRF attack, XSS attack, CORS etc. This app used role based authorization and token based authentication provided by JWT.

Logs

Both Error logs and Browsing logs are available to help you to get a view what is happening on your system.

Here are some key points which make AdminVUE a perfect solution as starter kit for your next project.

Single page Admin Template.
Separate API and CLIENT project.
Five database connectivity options(Sql Server/Mysql/Oracle/SqLite/PostgreSql)
Swagger API documentation.
Build with latest .Net core 6 for api.
Build with VueJs for client, the fastest & finest progressive javascript framework.
Material design UI template.
Vuetify for UI.
No Jquery dependency.
No sql file dependency
Vuex for state management.
Vue Router for navigation.
Axios to call Api.
EF core as ORM.
Progress Bar on every api request.
Export data on Pdf, Csv & Excel.
Shown chart on Dashboard using chart.js
Database Seeding & Migration.
Dependency Injection.
Handle HTTP error pages(like 404,401,403 etc).
CORS Managing technique.
Api authentication & authorization using JWT.
Efficient database structure.
Quick start guide.
Easy documentation.

Features

User Authentication
User Authorization
Full screen mode
Screen lock
Notification
User Profile
Reset Password
Email Verification
Password length cheeker
Profile Image Upload
Dashboard Charts(Line chart, Bar chart, Pie chart)
User Status on Dashboard
Menu CRUD
Menu Group CRUD
User CRUD
User Role CRUD
Browsing history
Assign menu to menu group
Assign menu group to User Role
General settings(Site Title, Description, Footer text)
Color settings(App Bar, Footer, Body)
Keep login histories
Export table data on Pdf & Excel
Dynamic navigation panel based on user role

Technologies used

.NET core 6
EF Core 6.0.0
Sql Server/Mysql/Oracle/SqLite/PostgreSql
Vue 2.6
Vuetify 2.2
Vuex 3.5
Vue router 3.2

Quick Start Guide

AdminVUE template has two separate project i.e. AdminClient and AdminApi.

Open AdminApi project on Visual studio code. Then open appsettings.json file and replace the Connection String by your one.
Open terminal on VS Code and write below commands
- dotnet ef migrations add initial
- dotnet ef database update
- dotnet run
You should see your API listening at localhost:5001.
Now open AdminClient on VS Code. Open terminal and write
- npm install
- npm run serve
Your project will be running at localhost:8080. Please see the online documentation for detail illustration.

Change Logs

11 March 2021 -- Version 1.0
    - Initial Release
-----------------------------
20 May 2021 -- Version 1.1
    - Save login history to DB
    - Various chart (line chart, bar chart etc.) shown in dashboard using chart.js
    - New options add on App Settings menu
27 Sep 2021 -- Version 1.2
-----------------------------
    - Add progress bar to api request
    - Export data to pdf & excel
    - Add full screen mode
    - Add screen lock
    - Add notification
    - Add browsing history
    - Add pie chart
    - Add footer text change option in app settings
29 Aug 2022 -- Version 1.3
-----------------------------
    - Update to .Net core 6 from .Net core 5
    - Add notification scroll bar
    - Manage App versions