Back to contents of Vuetify

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

In this document, I'll show you how to add Toolbar, Navigation Drawers, Menus on the Vuetify 2.0 empty project. Completed project would be like this site site. Also completed files are available as follows.

An empty Vuetify 2.0 project can be created in this steps, or downloaded & setup in this steps.

Toolbar

Create Navbar component

Create Navbar.vue file under components folder as follow:

<template>
  
</template>


<script>
export default {
  
}
</script>

Include Navbar from App.vue

Add <Nabvar /> in <template>, import line in <script>, and components on the export default object in <script>.



 







 



 






<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 <v-toolbar> tag as slot of <nav> on the Navbar.vue components.



 










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


<script>
export default {
  
}
</script>

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

This step is necessary to use Material Icon.










 











<!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 <v-toolbar>, fx: title and button




 
 
 
 
 
 
 
 
 




<template>
  <nav>
    <v-toolbar>
      <v-toolbar-title class="grey--text">
        <span class="font-weight-light">Site</span>
        <span>Title</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>

Add <v-navigation-drawer> in the <nav> on the Navbar.vue component

Add <v-navigation-drawer> as follows:














 
 
 


  <nav>
    <v-toolbar>
      <v-toolbar-title class="grey--text">
        <span class="font-weight-light">Site</span>
        <span>Title</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 <v-app-bar-nav-icon> on Navbar.vue

Note: <v-toolbar-side-icon> is replaced to <v-app-bar-nav-icon>



 











    <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">Site</span>
        <span>Title</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

Add v-list in v-navigation-drawer on the Navbar.vue.


 
 
 
 
 
 
 
 
 
 
 


    <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">Home</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title class="white--text">About</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: 'home', text: 'Home', route: '/'},
      { icon: 'contacts', text: 'About', route: '/about'},
    ]
  }),
}
</script>

Add v-for to the v-list-item 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>

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>

Use finished files

You can clone completed files with following command.

git clone https://github.com/UedaTakeyuki/template4vutify.git -b v02

initialization

Move to template4vutify folder, and do npm install to install dependent projects as vue and vuetify.

cd template4vutify
npm install

run test server.

Run test server as npm run serve. You can open this by http://localhost:8080/ or IP Addr of the running PC with port 8080.

references


2019.08.23 posted.
2019.10.23 last updated