❤️ Creative Tim Club - Access all our Present & Future Premium Products

Free VueJS Admin Template

Product description


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

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, .browserlistsrc .eslintrc.js and .postcssrc.js

Product certified by: Creative Tim
Vuetify Material Dashboard - Fully Coded and Responsive HTML5
Vuetify Material Dashboard - Sass Files for Professional Front End Developers
Vuetify Material Dashboard - The Progressive JavaScript Framework
Vuetify Material Dashboard - The Progressive JavaScript Framework
Downloads
71,768
Version
2.1.0
Changelog
Updated
4 years ago
Released
5 years ago
Reviews
Star
Handcrafted Elements
16
Customized Plugins
2
Example Pages
7
Community Support
Documentation
Fully Responsive

Upgrade to PRO Version

Get more power with Vuetify Material Dashboard 2 PRO. It has a lot more features compared to the free version. We hope you will create awesome websites/templates with this product!

What is in Demo? What is in PRO Version?
Elements 16 200
Plugins 2 4
Examples Pages 7 8
Full Coded
Documentation
SASS Files
Designer Files
Premium Support

We are here to help you!

92 Web Developers commented on this product

andregce
  • downloaded
4 years ago

Hi guys! Love the template. But I was trying to add a vuetify banner to a view, but keep getting: Unknown custom element: <v-banner> - did you register the component correctly? Are not all vuetify components available? Or am I doing something wrong? To test it out, I added the following between line 13 and 14 on UserProfile.vue and got the error above. <v-banner single-line> One line message text string with two actions on tablet / Desktop <template v-slot:actions> <v-btn text color="deep-purple accent-4" > Action </v-btn> </template> </v-banner> Thank you so much in advance.

andregce
  • downloaded

Oh, it seems to be a versioning thing. This template was not built with the latest version of Vuetify. Are there plans to update?
4 years ago

andregce
  • downloaded

Sorry, I didn't realize that ver 2 was released 4 days ago only! I forked the project and am migrating it myself. Thanks!
4 years ago

amirhoseinansourian
  • downloaded
4 years ago

HI i tried to run the project in cmd and create a dev-server for this, to present it into the browser (( $npm run serve )). but there is bunch of errors when do this. whats wrong with this... am i doing something wrong? how can i create a dev server for this?

ahmed987
  • downloaded
4 years ago

hi, thank you for this wonderful project, I encountered a problem while run yarn install these errors that appeared error Couldn't find package "babel-loader@^8.0.5" required by "@vue/cli-plugin-babel@^3.0.1" on the "npm" registry. info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command. After that i run yarn add --dev babel-loader@^8.0.5 and these errors that appeared info [email protected]: The platform "win32" is incompatible with this module. info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. info [email protected]: The platform "win32" is incompatible with this module. info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. warning " > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0". warning " > [email protected]" has incorrect peer dependency "vue@^2.5.18". warning "@vue/eslint-config-standard > [email protected]" has unmet peer dependency "eslint@>=5.0.0-alpha.2". warning "@vue/eslint-config-standard > [email protected]" has unmet peer dependency "[email protected] - 5.x". warning "@vue/eslint-config-standard > [email protected]" has unmet peer dependency "eslint@>=3.1.0". warning "@vue/eslint-config-standard > [email protected]" has unmet peer dependency "eslint@>=3.19.0". warning " > [email protected]" has unmet peer dependency "@babel/core@^7.0.0". warning " > [email protected]" has unmet peer dependency "webpack@>=2".

dragosct
  • downloaded

Hi, @ahmed987 ! Thank you for using our products. Please be sure that you have the latest npm and nodejs installed. Anyway, this product will receive an update soon for the latest version of dependencies. Regards, Dragos
4 years ago

davidmh8o
  • downloaded
4 years ago

I don't have any issue with this template. I just wanted to tell you 'Thanks' for doing this. If you ever create a pro paid version of this, I'll buy it in a heartbeat.

dragosct
  • downloaded

Hi, @davidmh8o ! Thank you for using our products and for your kind words. The PRO version it's almost ready we have to fix the latest details before releasing the product. Regards, Dragos
4 years ago

it2557a
  • downloaded
4 years ago

Hi guys, I considering to buy this template but after local install I see that the visual experience is not the same as in your demo. The demo is more polished and well defined, while files you provide in download gives different visual experience. Why that? May you please update free demo so it actually look and feel as your online demo? Thank you in advance.

it2557a
  • downloaded

In fact it is not the same version at all...
4 years ago

it2557a
  • downloaded

Well, I got the clone from live-demo branch. But anyway :)
4 years ago

thisisafakeaddress
  • downloaded
4 years ago

Is there a base URL that I need to set for production? I've run the build 'npm run build', and it successfully generates the 'dist' folder. But everything is just 404. It can't seem to find all of the resources (js/css). I've even tried manually changing the path in index.html. No luck.

thisisafakeaddress
  • downloaded

I'm on Windows btw. 'npm run dev' works perfectly fine. I haven't tried the production build on my Ubuntu server yet.
4 years ago

thisisafakeaddress
  • downloaded

Ok it seems to be because the router is redirecting to / . So the production build will only work if it's placed at the root level, if it is placed in a sub-directory such as example.com/subdirectory, it won't be able to find the resource files.
4 years ago

mike36q
  • downloaded
4 years ago

Downloaded and ran this but it looks like a lot of the CSS classes are somehow missing in the download leading to it not looking correct.

johnatulan2015
  • downloaded
4 years ago

Amazing work. Salute you guys!

lazaroesus
  • downloaded
4 years ago

Hi, thanks for the project. I have a problem, the colors of Vuetify do not work!

lazaroesus
  • downloaded
4 years ago

For example <v-badge color="error" overlap> the color "error" declared in the theme "error: '#f55a4e'," does not work the badge looks gray

You have to be logged in to post a comment. Login here.