Code

AdminVUE -VueJs Starter Admin Template with .NET Core 6

AdminVUE -VueJs Starter Admin Template with .NET Core 6

Cart 30 sales
Recently Updated

Live Demo

Documentation

Video Tutorial

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.

We will keep updating this project regularly with latest version of framework, plugins, features and fixes. Please share your feedbacks and new feature requests, we will try to implement those on upcoming versions.

System

  • .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

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 & 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 & step by step video tutorial guide.

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

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.

Change Log

Version 1.3

  • Update to .Net core 5 from .Net core 3.1
  • Add notification scroll bar

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

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

Version 1.0

  • initial release
by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey