creativetimofficial / vue-material-dashboard

Vue Material Dashboard - Open Source Material Design Admin

Vue Material Dashboard

Vue Material Dashboard is a beautiful resource built over Vue Material and Vuejs. It will help you get started developing dashboards in no time. Vue Material Dashboard is the official Vuejs version of the Original Material Dashboard. Using the Dashboard is pretty simple but requires basic knowledge of Javascript, Vuejs and Vue Router.

We have created it thinking about things you actually need in a dashboard. Vue Material Dashboard contains handpicked and optimised Vuejs plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customisation of this product.

Let us know what you think and what we can improve below. And good luck with development!

Table of Contents

• Versions
• Demo
• Quick Start
• Documentation
• File Structure
• Browser Support
• Resources
• Reporting Issues
• Technical Support or Questions
• Licensing
• Useful Links

Versions

HTML	React

Vue	Angular

Demo

Dashboard	User Profile	Tables	Maps	Notification

View More.

Quick start

☁️ Build Setup

install dependencies

npm install

serve with hot reload at localhost:8080

npm run dev

build for production with minification

npm run build

• Download from Github.
• Download from Creative Tim.
• Clone the repo: git clone https://github.com/creativetimofficial/vue-material-dashboard.git.

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Documentation

The documentation for the Vue Material Dashboard is hosted at our website.

File Structure

Within the download you'll find the following directories and files:

vue-material-dashboard
├── README.md
├── babel.config.js
├── package.json
├── postcss.config.js
├── public
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   ├── img
    │   └── scss
    │       ├── material-dashboard.scss
    │       └── md
    ├── components
    │   ├── Cards
    │   │   ├── ChartCard.vue
    │   │   ├── NavTabsCard.vue
    │   │   └── StatsCard.vue
    │   ├── Dropdown.vue
    │   ├── NotificationPlugin
    │   │   ├── Notification.vue
    │   │   ├── Notifications.vue
    │   │   └── index.js
    │   ├── SidebarPlugin
    │   │   ├── SideBar.vue
    │   │   ├── SidebarLink.vue
    │   │   └── index.js
    │   ├── Tables
    │   │   ├── NavTabsTable.vue
    │   │   ├── OrderedTable.vue
    │   │   └── SimpleTable.vue
    │   └── index.js
    ├── globalComponents.js
    ├── globalDirectives.js
    ├── main.js
    ├── material-dashboard.js
    ├── pages
    │   ├── Dashboard.vue
    │   ├── Icons.vue
    │   ├── Layout
    │   │   ├── Content.vue
    │   │   ├── ContentFooter.vue
    │   │   ├── DashboardLayout.vue
    │   │   ├── MobileMenu.vue
    │   │   └── TopNavbar.vue
    │   ├── Maps.vue
    │   ├── Notifications.vue
    │   ├── TableList.vue
    │   ├── Typography.vue
    │   ├── UpgradeToPRO.vue
    │   ├── UserProfile
    │   │   ├── EditProfileForm.vue
    │   │   └── UserCard.vue
    │   ├── UserProfile.vue
    │   └── index.js
    └── routes
        └── routes.js

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

• Demo: https://demos.creative-tim.com/vue-material-dashboard
• Download Page: https://www.creative-tim.com/product/vue-material-dashboard
• Documentation: https://demos.creative-tim.com/vue-material-dashboard/documentation
• License Agreement: https://www.creative-tim.com/license
• Support: https://www.creative-tim.com/contact-us
• Issues: Github Issues Page

Reporting Issues

We use GitHub Issues as the official bug tracker for the Vue Material Dashboard. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the Vue Material Dashboard. Check the CHANGELOG from your dashboard on our website.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

• Copyright 2024 Creative Tim (https://www.creative-tim.com/)

• Licensed under MIT (https://github.com/creativetimofficial/vue-material-dashboard/blob/master/LICENSE.md)

Useful Links

• More products from Creative Tim
• Tutorials
• Freebies from Creative Tim
• Affiliate Program (earn money)

Social Media

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Google+: https://plus.google.com/+CreativetimPage

Instagram: https://www.instagram.com/CreativeTimOfficial

vue-material-dashboard's Issues

Updating chart card dynamically with axios

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Update chart card with remote data, using axios library to feth the data. I managed to fetch the data and could update a {{TEMPLATE}}, but when I try to change the chart data object the graph does not change.

Current Behavior

Graph remains empty.

Steps to Reproduce

In src/pages/Dashboard.vue, under export default {, add the following:

  mounted() {
    var resp = {
      dailySalesChart: {
        data: {
          labels: ["M", "T", "W", "T", "F", "S", "S"],
          series: [[12, 17, 7, 17, 23, 18, 38]]
        }
      }
    };
    this.dailySalesChart = resp.dailySalesChart;
}

That's to prove that I can populate the graph by using mounted() method and it works.

When I try to replace that logic with axios it does not change the graph:

  mounted() {
    axios({
      url: "https://private-ac5ba3-test17899.apiary-mock.com/chart",
      method: "get"
    }).then(response => {
      this.dailySalesChart = response.data.dailySalesChart;
    });
}

I don't think the problem is the ajax call, I can see that it returns properly. It doesn't change the object in the promise:

  mounted() {
    var resp = {
      dailySalesChart: {
        data: {
          labels: ["M", "T", "W", "T", "F", "S", "S"],
          series: [[12, 17, 7, 17, 23, 18, 38]]
        }
      }
    };

    axios({
      url: "https://private-ac5ba3-test17899.apiary-mock.com/chart",
      method: "get"
    }).then(response => {
        // Ignore response.data and use the resp object instead.
        this.dailySalesChart = resp.dailySalesChart;
    });
}

Is there anything I need to call in order to update the graph? I thought that would update itself whenever the data changes.

Thank you very much!

test

test issue

[Feature Request] test

What is your enhancement?

test

Material design styling not working properly

i am using https://vuematerial.io/components/subheader
but i am not getting the proper design.
some styling classes are not working and content are scattered although i have copy paste it from the above mentioned link but in vain. kindly have a look that what could be the problem.

dispaly wrong when use a map package vue-amap,i don't know who's problem

https://github.com/ElemeFE/vue-amap

"npm install" does not lead to the assembly of the application

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

When running the npm install command, I expect the normal run of the npm run build / dev command,

Current Behavior

This does not happen.

Failure Information (for bugs)

It is necessary to replace the "npm install" in documentation with "--only = dev" option

• Device: PC
• Operating System: Win10

Failure Logs

"vue-cli-service" not internal or external
command, executable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve: `vue-cli-service serve --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[Feature Request] test

What is your enhancement?

test

[Bug] CUSTOMER SUPPORT NOT RESPONDING

Version

1.2.3

Reproduction link

https://www.google.com

Operating System

1

Device

2

Browser & Version

3

Steps to reproduce

1

What is expected?

PLEASE RESPONSE TO YOUR ZENDESK TICKET.

I have been trying to contact support for almost 2 weeks but got no response at all.

What is actually happening?

PLEASE RESPONSE TO YOUR ZENDESK TICKET.

I have been trying to contact support for almost 2 weeks but got no response at all.

---

Solution

PLEASE RESPONSE TO YOUR ZENDESK TICKET.

I have been trying to contact support for almost 2 weeks but got no response at all.

Additional comments

PLEASE RESPONSE TO YOUR ZENDESK TICKET.

I have been trying to contact support for almost 2 weeks but got no response at all.

Blank Page when build

I used this dashboard for my project and today i tried : - npm run build

After that, i put my dist, public, and src folders to my host. But it comes with blank page. How can i fix this?

Thanks!

Getting error with - import './assets/scss/material-dashboard.scss'

Unsure if you need to edit the following but sorted out the issue with me.

Delete from 'material-dashboard.js'

import './assets/scss/material-dashboard.scss'

And add to 'App.vue'

<style lang="scss"> @import './assets/scss/material-dashboard.scss'; </style>

test issue

broken style for md-select, md-accent, and others

for example, md-select with wrong style:

but it should be like this:

same goes for md-accent, md-primary, and many other things.
any suggestion to solve this quickly?

[Bug] The EditProfileForm.vue file is misspelled

Version

All versions

Reproduction link

#64

Operating System

windows server 2019

Device

windows server 2019

Browser & Version

Google Chrome

Steps to reproduce

The word mailadress in the return of the src/pages/UserProfile/EditProfileForm.vue file is misspelled
src/pages/UserProfile/EditProfileForm.vue 文件 的 return 中的emailadress 单词拼写错误

What is expected?

without

What is actually happening?

without

---

Solution

147f44a#diff-1e36eb0c51f4bba0de421ecb940839bcdabbdfe8e4a83c1511ac6fde8befa7e7

Additional comments

#64

Blank screen when using IE 11

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Expecting page to be displayed.

Current Behavior

Blank screen.

Failure Information (for bugs)

This may be related to IE 11 not supporting promise. Maybe adding a poly fill can resolve the issue?

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Open IE 11
2. Go to https://demos.creative-tim.com/vue-material-dashboard/#/dashboard
3. Blank page

Context

• Device: Desktop
• Operating System: Win 10
• Browser and Version: IE 11

Failure Logs

No error or logs found.

Npm run build gives blank page

Building for production with npm, results in a blank page with included javascript files and css. All white but no errors reported while building

how can i integrate this Vue material in my laravel project.

Can anyone help me how to add sidebar menu and link

Can anyone help me how to add sidebar menu and link.
Need steps to add sidebar
Thanks

[Bug] Npm run build results in blank page

Version

1.5.0

Reproduction link

https://github.com/marmz/csb-4bzy9t

Operating System

Linux Mint

Device

Laptop HP

Browser & Version

Chrome 96.0.4664.110 64 bit

Steps to reproduce

npm run build

What is expected?

Production version of given website

What is actually happening?

Blank page with some js and css included

---

Solution

Additional comments

Linked github page with build results.

[Bug] Use of Font Awesome Icons

Version

1.2.1

Steps to reproduce

Try to use Font Awesome as icons for the app, as per dashboard documentation:
change any icon in the sidebar DashboardLayout.vue to use Font Awesome, i.e:

<sidebar-link to="/notifications">
        <md-icon class="fas fa-boxes">notifications</md-icon>
        <p>Notifications</p>
      </sidebar-link>

in the same DashboardLayout.vue:

export default {
  name: "FontAwesome",
  components: {
    TopNavbar,
    DashboardContent,
    ContentFooter,
    MobileMenu
  }

What is expected?

To see the icons being used as Font Awesome Icons

What is actually happening?

No icon is shown, nor the font family changed to Font Awesome

---

Solution

Additional comments

No idea if i'm actually setting the name in the right place or doing it right. any help is appreciated

fixed position md-toolbar

make it an option for positioning md-toolbar, is it fixed or default (no fixed)

Chart bigger than shown on the demo

Prerequisites

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

When I run the server, my output is like the demo.

Current Behavior

When I run the server, the charts in the cards are big.

Steps to Reproduce

1. Download from creative tim
2. npm install
3. npm run dev
4. open in the browser

Context

• Device: PC
• Operating System: both Linux and Windows
• Browser and Version: both Firefox and Chrome

CUSTOMER SUPPORT NOT RESPONDING

PLEASE RESPONSE TO YOUR ZENDESK TICKET.

I have been trying to contact support for almost 2 weeks but got no response at all.

Any example on how to adapt it to run served by a Flask app?

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting

Current Behavior

What is the current behavior?

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. step 1
2. step 2
3. you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Device:
• Operating System:
• Browser and Version:

Failure Logs

Please include any relevant log snippets or files here.

table header is not aligned with the other rows

Sidebar width not same on mac and windows

Hi,
we are facing sidebar appearance issue on our website.it take different width on mac and on windows.On window system table data scrolling issue also appear when refresh page then scroll from bottom to up .
Please find below screenshot :
1.Window Issue : https://prnt.sc/n3i3ne
2.Mac Issue :https://prnt.sc/n3hv10

Thanks

sir i want to add sub menu to one of my menu. for example when i click on user profile menu there should open two other submenus. is this possbile if yes how. kinldy guide me i am new to vue.js

Preblem with the appearance of the Cards component

hi¡ I doing mix this template with laravel but the appearance of the component CARDS is not optimized. look the images, is how if the component cut her up head or part of this.

does you can help me?

test issue

Issue i cant use material-dashboard.scss inmy project

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [Yes ] I am running the latest version
• [Yes ] I checked the documentation and found no answer
• [ Yse] I checked to make sure that this issue has not already been filed
• [Yes ] I'm reporting the issue to the correct repository (for multi-repository projects)
  ==================
  Dear

i was bought license for material dashboard pro (developer license) , and i was downlad the app from your site , I was copied assets folder from creativtime project folder to my project folder and i changed angular .json to add new style (material-dashboard) ("src/assets/scss/material-dashboard.scss")" but the below error was shown.

can you help me please
also do you have clear documentation to how i can use material dashboard style in my project thank you

======================================

ERROR in ./src/assets/scss/material-dashboard.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/assets/scss/material-dashboard.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
Require stack:

• C:\Users\sabulawi\mainapp4\node_modules\sass-loader\lib\loader.js
• C:\Users\sabulawi\mainapp4\node_modules\loader-runner\lib\loadLoader.js
• C:\Users\sabulawi\mainapp4\node_modules\loader-runner\lib\LoaderRunner.js
• C:\Users\sabulawi\mainapp4\node_modules\webpack\lib\NormalModule.js
• C:\Users\sabulawi\mainapp4\node_modules\webpack\lib\NormalModuleFactory.js
• C:\Users\sabulawi\mainapp4\node_modules\webpack\lib\Compiler.js
• C:\Users\sabulawi\mainapp4\node_modules\webpack\lib\webpack.js
• C:\Users\sabulawi\mainapp4\node_modules@angular-devkit\build-webpack\src\webpack\index.js
• C:\Users\sabulawi\mainapp4\node_modules@angular-devkit\build-webpack\src\index.js
• C:\Users\sabulawi\mainapp4\node_modules@angular-devkit\build-angular\src\browser\index.js
• C:\Users\sabulawi\mainapp4\node_modules@angular-devkit\architect\src\architect-legacy.js
• C:\Users\sabulawi\mainapp4\node_modules@angular-devkit\architect\src\index.js
• C:\Users\sabulawi\mainapp4\node_modules@angular\cli\models\architect-command.js
• C:\Users\sabulawi\mainapp4\node_modules@angular\cli\commands\build-impl.js
• C:\Users\sabulawi\mainapp4\node_modules@angular-devkit\schematics\tools\export-ref.js
• C:\Users\sabulawi\mainapp4\node_modules@angular-devkit\schematics\tools\index.js
• C:\Users\sabulawi\mainapp4\node_modules@angular\cli\utilities\json-schema.js
• C:\Users\sabulawi\mainapp4\node_modules@angular\cli\models\command-runner.js
• C:\Users\sabulawi\mainapp4\node_modules@angular\cli\lib\cli\index.js
• C:\Users\sabulawi\AppData\Roaming\npm\node_modules@angular\cli\lib\init.js
• C:\Users\sabulawi\AppData\Roaming\npm\node_modules@angular\cli\bin\ng
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15)
  at Function.Module._load (internal/modules/cjs/loader.js:526:27)
  at Module.require (internal/modules/cjs/loader.js:666:19)
  at require (internal/modules/cjs/helpers.js:16:16)
  at Object.sassLoader (C:\Users\sabulawi\mainapp4\node_modules\sass-loader\lib\loader.js:46:72)

npm run build created empty page

When i try to create a production version, it results an empty page with no errors

[Bug] Blank Page when build

Version

1.4.3

Reproduction link

https://github.com/nidadinch/VueJS-App

Operating System

Windows 10

Device

Sony Vaio

Browser & Version

Chrome 84

Steps to reproduce

• npm run build

After that, i put my dist, public, and src folders to my host.

What is expected?

Vue app in my host

What is actually happening?

I used this dashboard for my project and today i tried : - npm run build

After that, i put my dist, public, and src folders to my host. But it comes with blank page. How can i fix this?

Thanks!

---

Solution

Additional comments

[Bug] Perfect Scrollbar doesn't work

Version

Vue Material Dashboard Pro - v1.3.1

Reproduction link

not needed

Operating System

Linux

Device

Desktop

Browser & Version

Chrome 75.0.3770.100 (Build oficial) (64 bits)

Steps to reproduce

1. Install the demo downloaded from site
2. Run "npm run serve"

What is expected?

Sidebar scrollbar using perfect scrollbar instead of default browser scrollbar

What is actually happening?

Is showing the default scrollbar

---

Solution

Additional comments

Error in render: "TypeError: Cannot read property 'options' of undefined"

I'm using latest version and after running dev command i face this:

And sidemenu options do not appear at all.

Side-bar icons don't show

when I run the example, the icons in the sidebar and other examples are not shown, I realized that they are the material-icons, when using the md-icon component, some help please
Thanks in advance

Error on compile assets

I ran in development mode raised a error. When I built, the dist folder was generated successful.

Error:

Build Successful: