creativetimofficial / vuetify-material-dashboard

Vuetify Material Dashboard - Open Source Material Design Admin by Creative Tim

Vuetify Material Dashboard

Vuetify Material Dashboard is a beautiful resource built over Vuetify, Vuex and Vuejs. It will help you get started developing dashboards in no time. Vuetify Material Dashboard is the official Vuejs version of the Original Material Dashboard PRO. 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. Vuetify Material Dashboard contains handpicked and optimized 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 customization of this product.

Vuetify is developed exactly according to Material Design spec. Every component is handcrafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export/import.

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

Getting Started

• Install Nodejs from Nodejs Official Page
• Open your terminal
• Navigate to the project
• Run npm install or yarn install if you use Yarn
• Run npm run dev or yarn serve to start a local development server
• A new tab will be opened in your browser

You can also run additional npm tasks such as

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

Vuetify

Vuetify is developed exactly according to Material Design spec. Every component is hand crafted to bring you the best possible UI tools to your next great app. The development doesn't stop at the core components outlined in Google's spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.

Vuex

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.

Vue-cli

We used the latest 3.x Vue CLI which aims to reduce project configuration to as little as possible. Almost everything is inside package.json + some other related files such as .babel.config.js, .eslintrc.js and .postcssrc.js.

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

Special thanks

During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:

• Vuetify for the wonderful framework

Let us know your thoughts 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

Vuetify	Vue	React	Angular	HTML

Demo

• Start page
• Notifications page

View More.

Quick start

Quick start options:

• Download from Creative Tim

Documentation

The documentation for the Vuetify Material Dashboard is hosted on vuetify website.

File Structure

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

vuetify-material-dashboard
├── README.md
├── CHANGELOG.md
├── babel.config.js
├── cypress.json
├── jest.config.js
├── now.json
├── package.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vuetify.svg
│   ├── components
│   │   └── base
│   │       ├── Card.vue
│   │       ├── Item.vue
│   │       ├── ItemGroup.vue
│   │       ├── ItemSubGroup.vue
│   │       ├── MaterialAlert.vue
│   │       ├── MaterialCard.vue
│   │       ├── MaterialChartCard.vue
│   │       ├── MaterialSnackbar.vue
│   │       ├── MaterialStatsCard.vue
│   │       ├── MaterialTabs.vue
│   │       ├── MaterialTestimony.vue
│   │       ├── Subheading.vue
│   │       └── VComponent.vue
│   ├── i18n.js
│   ├── locales
│   │   └── en.json
│   ├── main.js
│   ├── plugins
│   │   ├── base.js
│   │   ├── chartist.js
│   │   ├── vee-validate.js
│   │   └── vuetify.js
│   ├── router.js
│   ├── sass
│   │   ├── main.scss
│   │   ├── overrides.sass
│   │   └── vuetify-material
│   │       └── _sidebar.sass
│   ├── store.js
│   └── views
│       └── dashboard
│           ├── Charts.vue
│           ├── Dashboard.vue
│           ├── Index.vue
│           ├── Widgets.vue
│           ├── component
│           │   ├── Buttons.vue
│           │   ├── Grid.vue
│           │   ├── Icons.vue
│           │   ├── Notifications.vue
│           │   ├── Tabs.vue
│           │   └── Typography.vue
│           ├── components
│           │   └── core
│           │       ├── AppBar.vue
│           │       ├── Drawer.vue
│           │       ├── Footer.vue
│           │       ├── Settings.vue
│           │       └── View.vue
│           ├── maps
│           │   └── GoogleMaps.vue
│           ├── pages
│           │   └── UserProfile.vue
│           └── tables
│               └── RegularTables.vue
├── tests
│   ├── e2e
│   │   ├── plugins
│   │   │   └── index.js
│   │   ├── specs
│   │   │   └── test.js
│   │   └── support
│   │       ├── commands.js
│   │       └── index.js
│   └── unit
│       └── example.spec.js
├── vue.config.js

Browser Support

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

Resources

• Live Preview
• Download Page: Download
• Documentation is Here
• License Agreement: License
• Support: Contact
• Issues: Github Issues Page
• Vue Material Dashboard PRO - Demo
• For Front End Development - Material Kit Pro

Reporting Issues

We use GitHub Issues as the official bug tracker for the Vuetify 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 Vuetify 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 2018 Creative Tim (https://www.creative-tim.com)
• Creative Tim license

Useful Links

• More products from Creative Tim

• Vue 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://instagram.com/creativetimofficial

vuetify-material-dashboard's Issues

Question: laravel-mix

If I would like to use a more standard frontend compiler like laravel-mix (webpack wrapper)? Do you have any directions or tips making the conversion?

Memory Leak when switching routes

Whenever I switch routes with the navigation drawer, memory increases

resovle instead of resolve

Hi guys thanks for the free version. is there any specific reason in router folder -> index.js @ line 22 && 24 is resovle instead of resolve

/**
 * Vue Router
 *
 * @library
 *
 * https://router.vuejs.org/en/
 */

// Lib imports
import Vue from 'vue'
import VueAnalytics from 'vue-analytics'
import Router from 'vue-router'
import Meta from 'vue-meta'

// Routes
import paths from './paths'

function route (path, view, name) {
  return {
    name: name || view,
    path,
    component: (resolve) => import(  //SHOULDNT BE  resolve ?
      `@/views/${view}.vue`
    ).then(resovle)
  }
}

Vue.use(Router)

// Create a new router
const router = new Router({
  mode: 'history',
  routes: paths.map(path => route(path.path, path.view, path.name)).concat([
    { path: '*', redirect: '/dashboard' }
  ]),
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    }
    if (to.hash) {
      return { selector: to.hash }
    }
    return { x: 0, y: 0 }
  }
})

Vue.use(Meta)

// Bootstrap Analytics
// Set in .env
// https://github.com/MatteoGabriele/vue-analytics
if (process.env.GOOGLE_ANALYTICS) {
  Vue.use(VueAnalytics, {
    id: process.env.GOOGLE_ANALYTICS,
    router,
    autoTracking: {
      page: process.env.NODE_ENV !== 'development'
    }
  })
}

export default router

upgrade to vuetify 2

Hello, the actual version of vuetify is 2.2.8, is there a guide to migration or will you migrate the project?

404 after refreshing the page in production

After the build when we refresh the website it says a 404 error. we need to again remove the routes in the URL and load the page again !!!

Possible Upgrade to Vuetify 2.0?

I played around with it and tried to update the dashboard to vuetify 2.0, but I have ran into a few incompatibility and styling issues.

Action item on Stats Card

Hi there, I'm new to using this template. I would like to add an action button to the Stats Card to push users to another View.

Before I start to customize the StatsCard myself, I thought I would check if there are existing solutions.

multilevel menu

Is it possible that create multilevel menu in this project?

Progressive Web App

Hi ,
thank you for this product but i have some question , i'm a new developer of VueJS and there are so many template to create project, but i want to use your's and for this i want to ask if it's possible and how to add the pwa feature and the service worker to this template ?
(In other projects,there are other folders as build and config to add configuration of pwa and the service worker) .

Thanks for replying.

sign-in and sign-up page

is there a sign-in and sign-up page in this project?

Will not compile

Disregard- wrong product should be Vue-material-dashboard pro

Update of Vuetify version bricking Vuetify Material Dashboard

I have been trying to update the version of vuertify material dashboard with the last version of vuetify : 2.2.3 but it seems it brick the front end.
Any idea why ?

I need to merge this theme with nuxt.js

I've already tried it and it really complicates the installation. For configuration reasons, someone with experience could help me in the installation of these beautiful templates?

I'm trying to use vuetify-material-dashboard with backend golang

1. I downloaded vuetify-material-dashboard recently and having a problem building a project. I added a line in vue.config.js

const path = require('path') if (process.env.NODE_ENV === 'production') { module.exports.publicPath = path.resolve(__dirname, './dist') }

and could see it has no errors when 'vue-cli-service build'. But I found out vue-router doesn't work properly. There are two things I want to figure it out.

• I want to build a project which can see and add with golang.
• It's annoying that whenever I build vue project, it comes to dist folder. How can I change the link but follows the rootPath successfully.

2. Let's suppose that I build a project successfully, I have no idea how to link with golang and vue project. I added a folder in vue project folder to control backend for go lang. I am trying to use gin or gorilla, but not http which golang provides. Would anyone show me a sample code which could link both sides frontend and backend?

Vuetify datepicker - blank fields

Hello everyone.
I'm just trying to add a simple vuetify date picker (the dialog one), and when I try to do so, the date picker works but the styling appears a bit awkward as you can see in the image below.
When I click the dates on the date picker they are selected as they should to the v-textfield.
The code is exactly the same as Vuetify documentation suggests, I actually had it working before changing to this template.

There is no error's on console.

[Bug] The Login form is not displayed

Version

2.0.0

Reproduction link

http://none

Operating System

OSX/Ubuntu

Device

Macboo Pro

Browser & Version

Chrome/Firefox (Lastest Versións)

Steps to reproduce

Download from your website
Extract Files
npm install
npm run dev

---

What is expected?

View Login Form

What is actually happening?

When I go to Pages -> Login Form. I can only see the background image, login form is hidden because have a big left margin

---

Solution

Additional comments

Could you please update node-sass to v4.12.0

I unable build this program because of this problem：

Then I resolve this problem by update node-sass to v4.12.0
Could you Please update node-sass to v4.12.0?

how to add custom view like login page ?

hi, how to add custom view without inherit to admin page ?

Navigation drawer is not scroll-able

First of all, thank you for this great dashboard.

What is the problem?
core-drawer's navigation list is not scroll-able thus if we add few more links to links prop, only some of them that fit the screen (as high as highest main/router component) will be visible.
I tried to add overflow-y: scroll; but I got no luck. Can you please explain us how to fix it?

What is expected?
The navigation bar is expected to work like Vue Light Bootstrap Dashboard:

As you can see, we can scroll navigation section and see other items which don't fit in current screen.

What is happening?
Currently we can only see items which are fit in the screen's height and nothing more. The problem is happening because this section is not scroll-able:

How to reproduce it?
Simply expand links prop in src/components/core/Drawer.vue to contain more links. Something like this:

links: [
      {
        to  : '/dashboard',
        icon: 'mdi-folder-plus',
        text: 'Dashboard',
      },
      {
        to  : '/user-profile',
        icon: 'mdi-account',
        text: 'User Profile',
      },
      {
        to  : '/typography',
        icon: 'mdi-format-font',
        text: 'Typography',
      },
      {
        to  : '/icons',
        icon: 'mdi-chart-bubble',
        text: 'Icons',
      },
      {
        to  : '/maps',
        icon: 'mdi-map-marker',
        text: 'Maps',
      },
      {
        to  : '/notifications',
        icon: 'mdi-bell',
        text: 'Notifications',
      },
      {
        to  : '/notifications',
        icon: 'mdi-bell',
        text: 'Just making list bigger',
      },
      {
        to  : '/notifications',
        icon: 'mdi-bell',
        text: 'And more bigger',
      },
      {
        to  : '/notifications',
        icon: 'mdi-bell',
        text: 'Can you see me?',
      },
      {
        to  : '/notifications',
        icon: 'mdi-bell',
        text: 'I may not fit in your screen',
      },
      {
        to  : '/notifications',
        icon: 'mdi-bell',
       text: 'No way you can see me!',
      },
      {
        to  : '/notifications',
        icon: 'mdi-bell',
        text: 'This is the greatest place to hide a corpse :))',
      },
]

Well, can you see the item which hides the corpse?

Is problem related to me only?
No. You can see the original demo which is alive. Try to open it in some short-height screens and you can see that you have no access to some of the items.

What about the solution?
Adding overflow-y: auto to .v-responsive__content will fix it but I didn't send a pull request since the way I did this wasn't clean enough!

unable to create nested namespace in vuex

I try to create a nested module namespace in vuex but it was fail.

For example

|---app
   |---form

and if try to access it will as undefined.

how to unactivate eslint ?

I constantly get some errors for stupid spacing issue, how to unactivate eslint ?

[Feature Request] Update Vuetify to 2.0

What is your enhancement?

Vuetifyjs 2.0 has been released a few hours ago. This issue is just a placeholder for discussion/work on updating the theme to use this latest release.

https://github.com/vuetifyjs/vuetify/releases

A few backward incompatible changes (as expected from a major release) will require care when updating the theme and some of its components. Will start to familiarize myself with the new stuff in 2.0 and hopefully be able to help too.

Thanks
Bruno

Hi! how do I use native vuetify components

Hi! how do I use native vuetify components

High severity vulnerability in a dependence

I am trying today for the first time your project, so thanks in advance.

We run automatic tests, one of these is the standard npm audit.

This is the actual report, I know that it's not a direct dependency so probably it's not easy to fix, but I just want to warn you. In our case we moved tar into a direct dep of our project and updated.

npm audit

                       === npm audit security report ===


                                 Manual Review
             Some vulnerabilities require your attention to resolve

          Visit https://go.npm.me/audit-guide for additional guidance


  High            Arbitrary File Overwrite

  Package         tar

  Patched in      >=4.4.2

  Dependency of   node-sass

  Path            node-sass > node-gyp > tar

  More info       https://nodesecurity.io/advisories/803

found 1 high severity vulnerability in 24220 scanned packages
  1 vulnerability requires manual review. See the full report for details

Problems in 'npm install' step : attached complete log file

After downloading and unzipping the vuetify-material-dashboard-master.zip file in Ubuntu 18.04.02 Desktop, I executed 'npm install':

(base) marco@marco-U36SG:~/vueMatters/vuetify-material-dashboard-master$ npm install
npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not 
recommended for usage due to the number of issues. Please, upgrade your dependencies to the
actual version of core-js@3.
npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its 
successor.

> [email protected] install /home/marco/vueMatters/vuetify-material-dashboard-master
/node_modules/yorkie
> node bin/install.js

I attach here the complete log file.

node version: v12.11.0
npm version: 6.13.1
@vue/cli 4.1.1

How to correctly proceed?
Marco
2019-12-18T06_57_38_147Z-debug.log

Is there any way to have multiple themes for the dashboard?

Hi,

I am creating a PoC for the interface of an Open Source tool, and there are certain requirements such as being compatible with accessibility, e.g. colour blindness.

While it's possible to change the colours, making the dashboard colours OK for one type of colour blindness, it may still have issues for other types of colour blindness, as well as issues for screen readers, etc.

So it would be easier to have several themes, where some attributes would be different, such as colour, font size, background color, etc.

Is it possible with vuetify-material-dashboard now? Or is there any existing vue library that someone suggests to use to build such feature? Please.

Thanks!
Bruno

no Login

App.vue

  <v-app>
    <core-filter />

    <core-toolbar />

    <core-drawer />

    <core-view />
  </v-app>

View.vue

<template>
  <v-content>
    <div id="core-view">
      <v-fade-transition mode="out-in">
        <router-view />
      </v-fade-transition>
    </div>
    <core-footer v-if="$route.name !== 'Maps'" />
  </v-content>
</template>

这样使用router-view 集成login是一件很难的事。

Theme on top of existing application - material-stats-card not found

Hi,

We would like to use this theme into our existing application. We already use vuetify, vuex, vue-route.

We have installed the theme by doing:
npm i vuetify-material-dashboard

In our component, we have:

<template>
  <div>
    <v-flex sm6 xs12 md6 lg3>
      <material-stats-card
        color="green"
        icon="mdi-trophy-variant"
        title="Tournaments"
        value="4"
        sub-icon="mdi-trophy-variant"
        sub-text="Last 24 Hours"
      />
    </v-flex>
  </div>
</template>
<script>
export default {};
</script>

This is our main.js:

import Vue from "vue";
import "./plugins/vuetify";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

And this is our App.vue

<template>
  <v-app>
    <v-content>
    <Card/>
    </v-content>
  </v-app>
</template>

<script>

import Card from "./components/Card";

export default {
  name: "App",
  components: {
    Card
  },
  data() {return {};}
};
</script>

We are not able to load the 'material-stats-card' component. We are getting the following error:

"Unknown custom element: <material-stats-card>"

If we remove the element 'material-stats-card' our Card component loads properly.

It seems that we are not able to load globally the components of Vuetify-Material-Dashboard.

My questions are:

1. It is possible to add this theme on top of an existing application? (or should we have to start from scratch and create our application on top this theme?)

2. Any help/tip on registering globally the components from this theme? Any idea on why Vue is not able to find this element?

Thanks,

Raphael

No support for nested routes

[Feature Request] Can't install vuetify-material-dashboard on existing project

What is your enhancement?

Hi,
I don't understand and did not find any information about how I can import specific components or whole framework on my already existing project. In all manuals it's been said that you can download our repo and run 'npm install'. I tried 'npm install --save vuetify-material-dashboard' and it has installed it in node_modules folder, so what should I type afterwards to be able to use components? Also, when I try to add something like "import VuetifyMaterialDashboard from 'vuetify-material-dashboard'" to main.js it complains that 'vuetify-material-dashboard' not installed... Can you please give me a glimpse on how it should work?

Doc: how to change theme?

I cannot see in the doc infos about how to change theme.
I see that is using .scss and so I'd like to use it to customize to follow customer's request :(

[Bug] Using vuetify components in Vuetify Material Dashboard

Version

It is reproducible with the latest stable version

Reproduction link

https://jsfiddle.net/

Operating System

Windows 10

Device

Microsot Surface Book

Browser & Version

Chrome Version 75.0.3770.100 (Official Build) (64-bit)

Steps to reproduce

1. Add a vuetify button to Tim's Vuetify-Material-Dashboard:
   
   button1
   

2. Add "fab" to it to make it round.
   
   button1
   

3. The "fab" feature doesn't work.

What is expected?

The button to become round

What is actually happening?

The button stays a rectangle

---

Solution

Additional comments

I want to be able to use vuetify components and all of their features in Vuetify-Material-Dashboard but some of them like "Fab" feature don't work when you use vuetify components in Tim's Vuetify-Material-Dashboard. I believe it has to do with material design preventing certain vuetify features and components to load properly. Is there a way to do something that allows me to use vuetify in Vuetify-Material-Dashboard?

Documentation doesn't work

The documentation for this project at https://demos.creative-tim.com/vuetify-material-dashboard/documentation gives 404. Have you updated the link?

Thanks

downloaded free version, can't compile

hello, i've downloaded the free version to try the interface and the componentos, but i can't neither compile, i think it's a node-sass problem.

"C:\Users\xxxx\WebstormProjects\vuetify-material-dashboard-master\node_modules\node-sass\build\binding.sln" (destinazione predefinita) (1) ->
"C:\Users\xxx\WebstormProjects\vuetify-material-dashboard-master\node_modules\node-sass\build\binding.vcxproj.metaproj" (destinazione predefinita) (2) ->
"C:\Users\xxx\WebstormProjects\vuetify-material-dashboard-master\node_modules\node-sass\build\binding.vcxproj" (destinazione predefinita) (4) ->
(destinazione: ClCompile) ->
  c:\users\xxx\webstormprojects\vuetify-material-dashboard-master\node_modules\node-sass\src\create_string.cpp(17): error C2664: 'v8::String::Utf8Value::Utf8Value(const v8::String::Utf8Value &)': impossibile convertire l'argomento 1 da 'v8::Local<v8::Value>'
 a 'const v8::String::Utf8Value &' [C:\Users\xxx\WebstormProjects\vuetify-material-dashboard-master\node_modules\node-sass\build\binding.vcxproj]

    Avvisi: 2
    Errori: 1

Tempo trascorso 00:00:25.89
gyp ERR! build error
gyp ERR! stack Error: `C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin\MSBuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Users\xxx\WebstormProjects\vuetify-material-dashboard-master\node_modules\node-gyp\lib\build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:210:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Windows_NT 10.0.18363
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\xxx\\WebstormProjects\\vuetify-material-dashboard-master\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_l
ibrary="
gyp ERR! cwd C:\Users\xxx\WebstormProjects\vuetify-material-dashboard-master\node_modules\node-sass
gyp ERR! node -v v12.13.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@>=5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint-plugin-node@>=7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint-plugin-promise@>=4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint-plugin-standard@>=4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

anyone can help me? thank you

Nested routes not working with router setup

Nested/children routes are not working with the current vue router setup, e.g.

 {
    path: '/user/:id',
    view: 'User',
    children: [
      {
        path: 'profile',
        view: 'UserProfile'
      }
    ]
  },

children option is being ignored by function route.

[Bug] Build Error: Failed to load plugin 'vue' declared in '.eslintrc.js': Cannot find module 'eslint/lib/util/traverser'

Version

Latest

Operating System

macOS Mojave

Device

Mac

Browser & Version

Chrome

Steps to reproduce

After cloning, running "npm install" and then "npm run dev"

What is expected?

I want to run the app.

What is actually happening?

I get this error after "npm run dev"

Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Failed to load plugin 'vue' declared in '.eslintrc.js': Cannot find module 'eslint/lib/util/traverser'
Referenced from: /Users/user123/Dev/vuetify-material-dashboard/.eslintrc.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
at Function.Module._load (internal/modules/cjs/loader.js:529:25)
at Module.require (internal/modules/cjs/loader.js:659:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object. (/Users/user123/Dev/vuetify-material-dashboard/node_modules/eslint-plugin-vue/lib/rules/order-in-components.js:8:19)
at Module._compile (internal/modules/cjs/loader.js:723:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:734:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Module.require (internal/modules/cjs/loader.js:659:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object. (/Users/user123/Dev/vuetify-material-dashboard/node_modules/eslint-plugin-vue/lib/index.js:37:28)
at Module._compile (internal/modules/cjs/loader.js:723:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:734:10)
at Module.load (internal/modules/cjs/loader.js:620:32)

@ multi (webpack)-dev-server/client?http://192.168.178.44:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

---

Solution

Additional comments

I use node v11.4.0

[Bug] Bug in landscape mobile toolbar

Version

1.x

Reproduction link

https://demos.creative-tim.com/vuetify-material-dashboard/#/

Operating System

any

Device

desktop or mobile

Browser & Version

Chrome and Firefox, both latest

Steps to reproduce

Open Chrome (same for Firefox)
Open Console
Set the mobile view
Set the landscape mobile mode
Open the hamburger
=> you won't be able to see or get the lowest items of the left column menu (they are not showed and they are not reachable even scrolling)

What is expected?

To be able to reach the lower menu items

What is actually happening?

They are not showed and they can't be reached

---

Solution

Additional comments

Please , don't commit in master

Please, don't commit in master to testing. Is some confuse.

Make a branch and merge.

In other words, I work upgrade this version to Vuetify 2.0

https://github.com/MrJmpl3/vuetify-material-dashboard/tree/vuetify-2.0-and-other-things

[Bug] Stylesheet not loading correctly

Version

2.0

Reproduction link

https://demos.creative-tim.com/vuetify-material-dashboard/#/notifications

Operating System

Ubuntu 28.04

Device

Lenovo Thinkbad t480

Browser & Version

Chrome

Steps to reproduce

1. Clone Repo: git clone [email protected]:creativetimofficial/vuetify-material-dashboard.git
2. cd vuetify-material-dashboard
3. npm install
4. npm run dev

What is expected?

Loaded stylesheet as seen on admin theme demo site

What is actually happening?

There are slight differences:

• the little count in the app indication does not have a background
• buttons are white with text

Expected:

How it's getting rendered:

---

Solution

Additional comments

[Bug] v-alert doesn't fill v-snackbar width if not enough content

Version

2.1.0

Reproduction link

https://demos.creative-tim.com/vuetify-material-dashboard/index.html#/components/notifications

Operating System

Ubuntu

Device

MacbookPro

Browser & Version

Chrome 80.0.3987.162

Steps to reproduce

insert this component
<base-material-snackbar v-model="snackbar" >Welcome </base-material-snackbar>

What is expected?

The alert inside the snackbar should fill the full width of the snackbar

What is actually happening?

The alert width is reduced to the minimum necessary to show the content, but you can see the transparent snackbar component behind

---

Solution

Add property width="100%" to <base-material-alert> component in https://github.com/creativetimofficial/vuetify-material-dashboard/blob/master/src/components/base/MaterialSnackbar.vue at line 17

Additional comments

[Bug] MapBox problem

Version

1.0.0

Reproduction link

https://soal.github.io/vue-mapbox/guide/#using-as-es-module

Operating System

Windows

Device

PC

Browser & Version

75

Steps to reproduce

Clean setup.

What is expected?

Mapbox map should be visible.

What is actually happening?

Mapbox controls are visible, map is not.
Screenshot: https://pp.userapi.com/c858128/v858128184/1bfc3/XjRBCYtPsuM.jpg

---

Solution

Additional comments

Remove ElementUI from README

In the package.json file , has not used Element UI , please remove it to avoid misunderstandings among new users

Non-existent MDI icon

The mdi-settings icon on the settings component does not exist.

Suggest using mdi-cog or mdi-cog-outline

ReferenceError window is not defined.

Hello! colleagues I have a problem. I am installing this theme for my dashboard https://demos.creative-tim.com/vue-material-dashboard/?_ga=2.87424920.1430341878.1550962222-1433739867.1550437929#/dashboard ok. But importing the vue-chartist plugin I have an error and it is not precisely in the vue-chartist package but the main chartist package, the error is appended.

1. Error
   

2. my file nuxt.config.js
   

3. my plugins structure
   

4. my plugins file index
   

5. my chartist.js file
   

I would like to hear suggestions to solve this, I thank you very much!
Greetings.

Is it still maintained?

Hi @dragosct10 ,

what is the reason that your last commit on code was in October 2018 here e7fdc87 ?

It seems that it is not further developed, isn't it?

Are you caring about vue.js in generell any more or will other frameworks be more focused by @creativetimofficial?

Thanks!

[Bug] Outlined text-field are not working properly with prepend-inner-icon

Version

1.0.3

Reproduction link

https://demos.creative-tim.com/vuetify-material-dashboard-pro/#/

Operating System

Linux

Device

Dell XPS 15

Browser & Version

Mozilla

Steps to reproduce

1. Create outlined input text field
2. Add prepend-inner-icon

What is expected?

Clicking in the input text field the label is going on top

What is actually happening?

When clicking in the input text field the label is going top with a shift equal to the preprend icon

---

Solution

Remove preprend icon

Additional comments

[Bug] Anybody here? npm install can't compile

Version

last version

Reproduction link

http://www.google.com

Operating System

1

Device

1

Browser & Version

1

Steps to reproduce

1.npm install

What is expected?

run

What is actually happening?

3440 verbose stack SyntaxError: Unexpected end of JSON input while parsing near '...shasum":"c5d55af894a3'
3440 verbose stack at JSON.parse ()
3440 verbose stack at parseJson (C:\Users\user\AppData\Roaming\npm\node_modules\npm\node_modules\json-parse-better-errors\index.js:7:17)
3440 verbose stack at C:\Users\user\AppData\Roaming\npm\node_modules\npm\node_modules\node-fetch-npm\src\body.js:96:50
3440 verbose stack at runMicrotasks ()
3440 verbose stack at processTicksAndRejections (internal/process/task_queues.js:97:5)
3441 verbose cwd F:\文件下载\vuetify-material-dashboard-master (1)\vuetify-material-dashboard-master
3442 verbose Windows_NT 10.0.14393
3443 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\user\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install"
3444 verbose node v12.16.3
3445 verbose npm v6.14.4
3446 error Unexpected end of JSON input while parsing near '...shasum":"c5d55af894a3'
3447 verbose exit [ 1, true ]

---

Solution

Additional comments

3440 verbose stack SyntaxError: Unexpected end of JSON input while parsing near '...shasum":"c5d55af894a3'
3440 verbose stack at JSON.parse ()
3440 verbose stack at parseJson (C:\Users\user\AppData\Roaming\npm\node_modules\npm\node_modules\json-parse-better-errors\index.js:7:17)
3440 verbose stack at C:\Users\user\AppData\Roaming\npm\node_modules\npm\node_modules\node-fetch-npm\src\body.js:96:50
3440 verbose stack at runMicrotasks ()
3440 verbose stack at processTicksAndRejections (internal/process/task_queues.js:97:5)
3441 verbose cwd F:\文件下载\vuetify-material-dashboard-master (1)\vuetify-material-dashboard-master
3442 verbose Windows_NT 10.0.14393
3443 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\user\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install"
3444 verbose node v12.16.3
3445 verbose npm v6.14.4
3446 error Unexpected end of JSON input while parsing near '...shasum":"c5d55af894a3'
3447 verbose exit [ 1, true ]

[Bug] Blank page on ie11

Version

latest

Reproduction link

https://www.creative-tim.com/new-issue/vuetify-material-dashboard

Operating System

windows

Device

pc

Browser & Version

ie11

Steps to reproduce

enter in demo with ie11

What is expected?

normal dashboard

What is actually happening?

blank page

---

Solution

Additional comments

[Bug] Receiving eslint error: 'grid-list-xl' has been removed (vuetify/no-legacy-grid) at src\views\TableList.vue:6:5

Version

2.0.0

Reproduction link

https://github.com/creativetimofficial/vuetify-material-dashboard

Operating System

Windows 10

Device

PC

Browser & Version

Google Chrome Version 76.0.3809.132 (Official Build) (64-bit)

Steps to reproduce

1. git clone https://github.com/creativetimofficial/vuetify-material-dashboard.git
2. npm i
3. npm run lint
4. npm run dev

What is expected?

Compiled with 0 warning

What is actually happening?

Compiled with 1 warnings
Module Warning (from ./node_modules/eslint-loader/index.js):
error: 'grid-list-xl' has been removed (vuetify/no-legacy-grid) at src\views\TableList.vue:6:5:

1 error found.

---

Solution

Additional comments

Upcoming VMD rebuild

I wanted to give an update on what is going on with VMD and address some of the concerns in regards to updates or support.

The initial VMD Free was built on v1 of Vuetify while VMD PRO was built months later on v2. This caused a major disconnect in solving issues and propagating fixes between the 2 versions. VMD Free was upgraded to v2 later on but it took way longer than it should have and it was still a separate project. The separation ended up being a bigger problem than I anticipated.

Ultimately this caused more help requests than I could handle. While VMD is built on top of Vuetify, not every aspect is custom and would result in numerous help requests that had nothing to do with the theme. Vuetify is a massive library and it was being confused as being built specifically for VMD.

Due to this I ultimately closed the premium-theme-support channel in Q4 of last year. Flash forward with covid and I didn't have the bandwidth to bring it back.

At this moment I'm about 50% done converting VMD to our current standardized structure (what's used in newer Vuetify themes). This version will accommodate both the Free and the PRO version of the theme and with any lucky resolve majority, if not all, of the issues that users were having.

I appreciate your patience and in the meantime I've re-opened the theme channel. If you have questions please feel free to reach out to me https://discord.gg/w2qKXtD.

Thank you,

John Leider