Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue.js material design dashboard

Related course:
Fullstack Vue: The Complete Guide to Vue.js

This dashboard in Material Design style can help you launch your software as a service (SaaS) project.
It’s pretty basic (one file), but should help you get started.

Materialize dashboard

This dashboard has one theme (as shown in the screenshot).
It’s basic features are:

  • Material Design style
  • Main layout
  • Programmable menu screens
  • Data table

materialize dashboard

The dashboard doesn’t have any special requirements (copy the html code). If you like it share it.


<html class="" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<link rel="stylesheet prefetch" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<link rel="stylesheet prefetch" href="//fonts.googleapis.com/icon?family=Material+Icons">
<title>Vue.js Material Design Dashboard. //vuejsexamples.nettitle>

<script src="//unpkg.com/vue">script>

<style class="cp-pen-styles">
body {
background-color: #f2f2f2;
font-size: 13px;
}

h6 {
font-size: 1.5rem;
margin-top: 0;
}

p {
margin: 0;
}

i.large {
font-size: 48px;
}

.card,
.card-panel {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
}

.container-fluid {
padding: 1rem 1.5rem;
margin: auto;
}

.row {
margin: 0 -0.75rem;
}

.subheader {
margin-bottom: 1rem;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
}

@media only screen and (min-width: 993px) {
.main {
padding-left: 250px;
}
}
/* nav */
nav {
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
nav ul a {
padding: 0 12px;
}
nav ul a img {
line-height: 56px;
vertical-align: middle;
}

nav,
nav .nav-wrapper i,
.navbar-fixed {
height: 56px;
line-height: 56px;
}

.nav-wrapper ul a:hover {
background-color: transparent;
}
.nav-wrapper li:first-child a {
padding-left: 24px;
}
.nav-wrapper .title {
font-size: 1.4rem;
}

/* sidenav */
.side-nav .divider {
margin: 8px 0;
}
.side-nav .active {
background-color: rgba(0, 0, 0, 0.05);
}
.side-nav .active a {
color: #212121;
font-weight: 500;
}
.side-nav .subheader {
line-height: 24px;
height: 32px;
margin: 0;
padding: 4px 16px;
color: #616161;
font-weight: normal;
font-size: 13px;
}

@media only screen and (min-width: 993px) {
.side-nav {
width: 250px;
top: 66px;
padding: 12px 8px !important;
height: calc(100% - 56px);
}
.side-nav li > a,
.side-nav li > a > i.material-icons {
height: 40px;
line-height: 40px;
}
.side-nav li > a > i.material-icons {
margin-right: 24px;
}
.side-nav li > a {
padding: 0 16px;
font-weight: normal;
font-size: 13px;
color: #616161;
}
.side-nav li > a:hover {
border-radius: 2px;
}
}
/* cards */
.card .card-action {
border-top: none;
}

.card .card-action a {
color: #fff !important;
}

table {
font-size: 13px;
}

table td:first-of-type,
table th:first-of-type {
padding-left: 24px;
}

table td:last-of-type,
table th:last-of-type {
padding-right: 24px;
}

table.bordered > thead,
table.bordered > tbody > tr {
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.card table tr:last-child {
border-bottom: none;
}

.card-text {
width: calc(100% - 60px);
}

.card-icon i {
width: 100%;
text-align: center;
color: rgba(0, 0, 0, 0.25);
}
style>
head>
<body>

<div id="app">

<div class="navbar-fixed">
<nav>
<div class="nav-wrapper blue">

* [_menu_](#%21)
* [Dashboard](#%21)

* [_help_](#%21)
div>
nav>
div>
<div class="brown hide" style="height: 200px;">div>

* [_dashboard_Dashboard](#)
* [_store_Stores](#)
* <div class="divider">div>
* [_settings_Settings](#)
* [_help_Help & Feedback](#)

<div class="main" v-if="isActive('dashboard')">
<div class="container-fluid">
<div class="row">
<div class="col s12 m4">
<div class="card blue white-text">
<div class="card-content valign-wrapper">
<div class="card-text">

######



div>
<div class="card-icon">
_description_
div>
div>
<div class="card-action">
[View report](#)
div>
div>
div>
<div class="col s12 m4">
<div class="card green white-text">
<div class="card-content valign-wrapper">
<div class="card-text">

######



div>
<div class="card-icon">
_check_circle_
div>
div>
<div class="card-action">
[View report](#)
div>
div>
div>
<div class="col s12 m4">
<div class="card orange white-text">
<div class="card-content valign-wrapper">
<div class="card-text">

######



div>
<div class="card-icon">
_build_
div>
div>
<div class="card-action">
[View report](#)
div>
div>
div>
div>
<div class="row">
<div class="col s12 m12">
<div class="card">
<table class="bordered highlight">
<thead>
<tr>
<th colspan="2">Itemsth>
tr>
thead>
<tbody>
<tr v-for="product in products">
<td>td>
<td class="right-align">$td>
tr>
tbody>
table>
div>
div>
div>
div>
div>

<div class="main" v-if="isActive('store')">
<div class="container-fluid">
<div class="row">
<div class="col s12 m4">
<div class="card red white-text">
<div class="card-content valign-wrapper">
<div class="card-text">

###### Store

Just another menu page.

div>
<div class="card-icon">
_description_
div>
div>
<div class="card-action">
[View report](#)
div>
div>
div>

<div class="main" v-if="isActive('settings')">
<div class="container-fluid">
<div class="row">
div>
div>
div>

<div class="main" v-if="isActive('help')">
<div class="container-fluid">
<div class="row">
div>
div>
div>

div>
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js">script>
<script>
new Vue({
el: '#app',

data: {
active: 'dashboard',
card: [
{ text: 'Todays estimated earnings.', title: '$20.000' },
{ text: 'Revenue Month', title: '$75.000' },
{ text: 'Revenue Year', title: '$500.000' }
],
products: [
{ name: 'Latte', sold: 3140 },
{ name: 'Cream', sold: 1029 },
{ name: 'Espresso', sold: 7530 },
{ name: 'Iced', sold: 4010 },
{ name: 'Moka', sold: 1100 }
]
},
methods: {
makeActive: function(item){
this.active = item;
console.log(this.active);
},
isActive: function(name) {
if (name === this.active)
return true;
return false;
}
}

});
script>

body>
html>


© vuejsexamples.net - Privacy Policy - Cookie Policy