Make Toolbar, Navigation Drawers, Menus on the Vuetify 2.0 project

Basis files

The basis files of general vuetify project can be download from v_1.0.0_Make_Vuetify_environment_by_vue-cli or,

git clone https://github.com/UedaTakeyuki/template4vutify.git -b v_1.0.0_Make_Vuetify_environment_by_vue-cli

Toolbar

Refer Vuetify Tutorial #7 - Toolbars.

Create Navbar component

Create Navbar.vue file under components folder as follow:

<template>
  
</template>


<script>
export default {
  
}
</script>

Include Navbar from App.vue

Add tag, import line, and components on the export default.



 







 



 






<template>
  <v-app>
    <Navbar />
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
import Navbar from '@/components/Navbar'

export default {
  name: 'App',
  components: { Navbar },
  data: () => ({
    //
  }),
};
</script>

Add tag as slot of



 










<template>
  <nav>
    <v-toolbar></v-toolbar>
  </nav>
</template>


<script>
export default {
  
}
</script>

Add Google Material Icon CSS to the index.html under the public

Refer gnulnx's comment of How do I use the icons!?, issue #2663 of vuetify.










 











<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>ulbl-vuetify</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but ulbl-vuetify doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Add contents of , fx: title and button




 
 
 
 
 
 
 
 
 




<template>
  <nav>
    <v-toolbar>
      <v-toolbar-title class="grey--text">
        <span class="font-weight-light">Todo</span>
        <span>Ninja</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn text>
        <span>Sign Out</span>
        <v-icon right>exit_to_app</v-icon>
      </v-btn>
    </v-toolbar>
  </nav>
</template>

Refer Vuetify Tutorial #8 - Navigation Drawers.

Add in the

Add as follows:














 
 
 


  <nav>
    <v-toolbar>
      <v-toolbar-title class="grey--text">
        <span class="font-weight-light">Todo</span>
        <span>Ninja</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn text>
        <span>Sign Out</span>
        <v-icon right>exit_to_app</v-icon>
      </v-btn>
    </v-toolbar>

    <v-navigation-drawer v-model="drawer" app class="primary">
      <p>test</p>
    </v-navigation-drawer>
  </nav>

The visibility of v-navigation-drawer is depend on v-model="drawer", so add drawer in the export default



 
 
 



<script>
export default {
  data: () => ({
    drawer: true
  }),
}
</script>

Add on Navbar.vue

Note: is replaced to



 











    <v-toolbar>
<!--      <v-toolbar-side-icon></v-toolbar-side-icon> -->
      <v-app-bar-nav-icon class="grey--text" @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title class="grey--text">
        <span class="font-weight-light">Todo</span>
        <span>Ninja</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn text>
        <span>Sign Out</span>
        <v-icon right>exit_to_app</v-icon>
      </v-btn>
    </v-toolbar>

Change default value of drawer to false on Navbar.vue




 




<script>
export default {
  data: () => ({
    drawer: false
  }),
}
</script>

Add list to the Navigation drawer

Refer Vuetify Tutorial #10 - Lists.

Add v-list in v-navigation-drawer on the Navbar.vue.
Note: v-list-tile is changed to v-list-item.


 
 
 
 
 
 
 
 
 
 
 


    <v-navigation-drawer v-model="drawer" app class="primary">
      <v-list>
        <!-- v-list-tile is changed to v-list-item -->
        <v-list-item>
          <v-list-item-action>
            <v-icon class="white--text">dashboard</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title class="white--text">Dashboard</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

Add link objects in the data on the Navbar.vue.





 
 
 
 
 




<script>
export default {
  data: () => ({
    drawer: false,
    links: [
      { icon: 'dashboard', text: 'Dashboard', route: '/'},
      { icon: 'folder', text: 'My Projects', route: '/projects'},
      { icon: 'person', text: 'Team', route: '/team'},
    ]
  }),
}
</script>

Add v-for to the v-list-tile and change string literal to variable




 

 


 





    <v-navigation-drawer v-model="drawer" app class="primary">
      <v-list>
        <!-- v-list-tile is changed to v-list-item -->
        <v-list-item v-for="link in links" :key="link.text" router :to="link.route">
          <v-list-item-action>
            <v-icon class="white--text">{{ link.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title class="white--text">{{ link.text }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

Refer Vuetify Tutorial #22 - Menus.
Note: slot="activator" is not worked, need .

Add v-menu in v-toolbar on the Navbar.vue










 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 







    <v-toolbar>
<!--      <v-toolbar-side-icon></v-toolbar-side-icon> -->
      <v-app-bar-nav-icon class="grey--text" @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title class="grey--text">
        <span class="font-weight-light">Todo</span>
        <span>Ninja</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>

      <!-- dropdown menu -->
      <v-menu offset-y>
        <template v-slot:activator="{ on }">
        <!-- <v-btn text slot="activator"> -->
        <v-btn text v-on="on">
          <v-icon left>expand_more</v-icon>
          <span>Menu</span>
        </v-btn>
        </template>
        <v-list>
          <!-- v-list-tile is changed to v-list-item -->
          <v-list-item v-for="link in links" :key="link.text" router :to="link.route">
            <v-list-item-title>{{ link.text }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>

      <v-btn text>
        <span>Sign Out</span>
        <v-icon right>exit_to_app</v-icon>
      </v-btn>
    </v-toolbar>

Download complete files

Download from v_1.1.0_Make_Toolbar,_Navigation_Drawers,_Menus_on_the_Vuetify_project or,

git clone https://github.com/UedaTakeyuki/template4vutify.git -b v_1.1.0_Make_Toolbar,_Navigation_Drawers,_Menus_on_the_Vuetify_project

2019.08.23 posted.
2019.08.24 last updated