Vue.JS Material

HTML

<link rel="stylesheet" href="https://unpkg.com/vue-material@latest/dist/vue-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
<script src="https://unpkg.com/vue-material@latest"></script>
<div class="app-viewport" id="file-list">
<md-layout id = "container" style = "max-height:40px;">
   
        <md-layout md-column  md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33">

                  <md-list>
                  
                   <md-list-item  class = "md-display-2">levi</md-list-item>
                           <router-link :to = "{ name: 'About' }"><md-row>About</md-row></router-link>
                            <md-row >Customers</md-row >
                             <md-row >Contact Us</md-row >
                         <md-row >Support</md-row >
                         <md-row >Support</md-row >
                         <md-row >Support</md-row >
                      <md-row >Support</md-row >
                      <md-row >Support</md-row >
                      <md-row >Support</md-row > 
        <md-row >Support</md-row > 
              <md-row >Support</md-row >   
              <md-row >Support</md-row >   
              <md-row >Support</md-row >   
              <md-row >Support</md-row >   
              <md-row >Support</md-row >   
              <md-row >Support</md-row >   
               </md-list>   
                      
                      
                      
                      
                  </md-layout>


<md-layout md-column  md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33">


              <md-row class = "md-display-2" >Using levi</md-row >
                    <md-row >Business</md-row >
                    <md-row > <router-link class = "" :to = "{ name: 'Product' }">
                        Features
                    </router-link> </md-row>
                       ...

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic');
@import url(//fonts.googleapis.com/icon?family=Material+Icons);

 .main-toolbar {
        
        position: -webkit-sticky;
        top : 1px;    
        width: 100%;
    }
 .md-layout , #divis {
margin: 0px;
    
    }
    #flex-container, #abc {
        
        font-size: 55px;
        display: flex;
        flex:1;
    }
    

    #navbutton {
        text-transform: none;
        font-size: 19px !important;

    }
      
    .nav-link {
/*        display: inline;*/
        font-family: Helvetica neue;
        cursor: pointer;
        font-size: 19px;
        padding: 10px;
        font-weight: bolder;
        margin:8px;
    }
    
    .md-display-2 {
        font-family: Heiti SC;
        font-size: 20px;
    }
    
    #container > .md-layout {
/*  background-color: #F9FBFB;*/
  min-height: 100px;
  border-color: black;
  align-items: center;
  justify-content: center;
  border-style: dotted;
  border-width: 1px;
  padding: 8px;
margin-bottom: 100px;
font-family: Heiti SC;

}
    
    footer {
        margin-top: 100px ;
    }
    
    .btnsubscribe {
         text-transform: none;
        font-family: Heiti SC;
        font-weight: bolder;
        min-width: 66px !important;
         min-height: 56px !important;
        font-size: 19px !important;
    }
    
    .md-layout #inputSubscribe {

    margin-left: 09px;
    width: 300px;
    }
    
    .md-layout h3 {
        padding: 0px;
    }

JavaScript

Vue.use(VueMaterial)

Vue.material.registerTheme('default', {
  primary: 'deep-purple',
  accent: 'red',
  warn: 'red',
  background: ''
})

new Vue({
  el: '#file-list'
})