M-Dashboard: A simple productivity Dashboard to monitor tasks/work, Built with vue.js

by Vue.js Examples

Formerly known by Vuetify Admin Dashboard
  • logout button is in user menu in app bar

A Crud Admin Dash made from Vue, Vuex, Vue-Router and Vuetify. Features working Notification system, Login system, JWT system, Store, Data tables

M-Dashboard is a simple (Hopefully not ugly) productivity Dashboard to monitor tasks/work, it can also be used as an crud admin panel. Using the Dashboard is pretty simple but requires basic knowledge of Javascript, and basic knowledge on libraries listed in the docs

View Demo View Github

Dashboard Features

Link to Features

Few things on the roadmap

  • user roles
  • user page api’s
  • more prepackaged components
  • pro version(if I get to it)
  • this will always be free
  • more features and support
  • dynamic inline edit
  • Cool new login screen
Old version 1.0 Demo

Getting Started

  1. Install Nodejs from Nodejs Official Page
  2. Install @Vue/cli 4 globally
  3. clone repo
  4. & navigate to the folder you cloned the repo to
  5. Open your terminal(CMD/Power Shell etc) to project root( or use Shift + right-click in the folder on windows)
  6. at project root (/M-Dashboard) run one of the following commands in the terminal depending on which you use:
  • npm install, or yarn installif you use Yarn
  1. Run npm run dev --open or yarn serve --open to start a local development server or use Vue UI
  2. A new tab will be opened in your browser or click the url in the terminal
  3. You can use Reqres to test logging in/out, or for data tables api(its already hooked up)

After installing the dependencies you can also run additional tasks such as these fun ones:

  • npm/yarn run build to build your app for production
  • npm/yarn run lint to run linting.

Current Bugs

Checkout the Issues tab to see if any have been reported or closed.

Reporting Issues

  1. Make sure that you are using the latest version of the M-Dashboard and installed corerct versions of the dependcies with NPM/YARN.
  2. Provide reproducible steps on how to recreate the issue, this can speed things up & will help a lot.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
  4. Provide screenshots if you are trying to point out an visual bug

You can send us a tweet if you need faster minorish assistance, otherwise create an issue on here.