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-whiteframe class = "main-toolbar ">

  <md-theme name = "teal">
      
      <md-toolbar id = "flex-container">

     <router-link id = "nav" class = "nav-link " :to = " { name: 'levi' }" style = " text-decoration: none;  color: #ffffff; background-color: red; ;         ">levi</router-link>
     
     
    <router-link class = "nav-link" :to = "{ name: 'Product' }" style = " text-decoration: none;  color: #ffffff; background-color: yellow;">Using levi</router-link> 
     
     <router-link  class = "nav-link" :to = "{ name: 'Support' }" style = " text-decoration: none; color: #ffffff; background-color: green;"> Support </router-link>
     
         <md-button class = "md-raised md-button">
         
          <router-link id = "navbutton" style = " text-decoration: none; color: #429bf4;" class = "nav-link" :to = "{ name: 'levi' }" > Create Account</router-link>
          
     
</md-button>
     
      </md-toolbar>
      
      
  </md-theme>
   
   </md-whiteframe>
   
   
   
   
</div>

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%;
    }
    #flex-container, #nav {
        
        font-size: 55px;
        display: flex;
        flex:1;
    }
    

    #navbutton {
        text-transform: none;
        font-size: 19px !important;
        font-family: Heiti SC;
    }
      
    .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: 'amber'
})

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