AdminVUE is a light Admin template, developed based on modern Vuejs framework with Vuefify(new UI framework),.NET core 3.1, Entity Framework core 3.1.6 & Vuex state management. 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+.
AdminVUE template consists of two separate project, one is AdminAPi project for API or you may call it service and the other is AdminClient project for UI or you may call it client for your API.
Both of the projects are developed separately and you have full flexibility to use them independently.
Now have a look some of the features:
This project covered all the latest technology including Modern VueJs,Vuetify,Vuex,.NET core 3.1, EF Core 3.1.6, Dependency Injection concept, Database driven role based Authorization, JWT and many more.
The API project has a well descriptive Swagger API documentation. You will see this on localhost:5001 soon after you run the AdminApi project.
This project used the new UI framework Vuetify.
Client side state management is done by VUEX.
Database driven role based Authorization
This project used database driven role based authorization. Through migration data you will get two roles, named Admin and User. You can add more role from Role List menu after running the Client project.
The power of dependency injection and loosely couple technique is perfectly used here to achieve the flexibility of use more than one database and couple more things.
The most popular five relational database (SQL Server, MySql, Sqlite, PostgreSql and Oracle12c+) provider is used here.
AdminClient project uses the full responsive latest Vuetify UI framework for starter template. It is light and custom UI template which is developed only for this Project.
EF Core Code first & Seed Data
In this application I used EF Core code first approach and here all the database queries is written in LINQ. After first migration all the project specific data will insert to your underlying database.
JSON Web Token (JWT) Verification
The API project here used JWT authentication to verify the user and issue a token for a certain amount of time (currently it is set to 180 minutes).
HTTP Status Code Error Page
Here the AdminClient project will handle every client error (http status code 4xx like 404) and server error (http status code 5xx like 503). If these type of error occurs then it will re-direct to a separate page with proper message.
Including all of the above features you will also get a material design UI,form validation,email validation,image upload technique, snackbar implementation, CORS managing technique, database connectivity through Interface and lot more.The AdminVUE template offers you full source code of both Api and Client project along with a rich documentation file.
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 video tutorial or documentation for detail illustration. You may also see the live demo.