Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs material design

Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

Vue can be combined with material design. This makes your app really slick!
It’s a style that Google uses a lot, the style is in many of their products like Gmail or Youtube.

vuejs material design

We’ll create an app that has a sidebar that can open and close.

vuejs material

Create a file called app.js with this data:


new Vue({
el: '#app'
, methods: {
toggleLeftSidenav() {
toggleRightSidenav() {
closeLeftSidenav() {

Then create an index.html file with this data:

<!DOCTYPE html><html class=''>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">

<link rel='stylesheet prefetch' href='//unpkg.com/[email protected]0.7.1/dist/vue-material.css'><link rel='stylesheet prefetch' href='//fonts.googleapis.com/icon?family=Material+Icons'>
<style class="cp-pen-styles">
<div id="app">
## VUE - Material - sidebar

<md-button class="md-raised md-primary" @click.native="toggleLeftSidenav">Toggle left</md-button>

<md-sidenav class="md-left" ref="leftSidenav" >
<div class="md-toolbar-container">
### Sidenav content

<md-button class="md-raised md-primary" @click.native="closeLeftSidenav">Close</md-button>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//unpkg.com/[email protected]'></script><script src='//unpkg.com/[email protected]'></script>
<script src="app.js"></script>

If you click the toggle button, it will open the sidebar.

vuejs material design

© vuejsexamples.net - Privacy Policy - Cookie Policy