Passé de mode

Back to contents of Vuetify

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

Note: Also the Out-of-the-box vuetify-nav (opens new window) component is available instead of following the steps below. For more detail, refer this blog (opens new window).

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 (opens new window) 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>, e.g. with 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 the above v-navigation-drawer is depend on v-model="drawer", so add drawer in the export default as follow:



 
 
 



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

# Add <v-app-bar-nav-icon> on Navbar.vue

Note: <v-toolbar-side-icon> of vuetify 1.0 was replaced to <v-app-bar-nav-icon> at vuetify 2.0.



 











    <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>

# Replace <p>test</p> in the Navigation drawer by a v-list of menu item.

Replace <p>test</p> written before, by v-list just having single v-list-item into v-navigation-drawer on the Navbar.vue. This v-list-item is just a skeleton and will soon be fleshed out with iteration by v-for later.


 
 
 
 
 
 
 
 
 
 
 


    <v-navigation-drawer v-model="drawer" app class="primary">
      <v-list>
        <!-- v-list-tile was replaced to v-list-item at Vuetify 2.0 -->
        <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 with the icon, text, route for v-list-item into the data on the above Navbar.vue.





 
 
 
 




<script>
export default {
  data: () => ({
    drawer: false,
    links: [
      { icon: 'home', text: 'Home', route: '/'},
      { icon: 'contacts', text: 'About', route: '/about'},
    ]
  }),
}
</script>

Embed v-for to the v-list-item and replace string literals by the link objects created just before.




 

 


 





    <v-navigation-drawer v-model="drawer" app class="primary">
      <v-list>
        <!-- v-list-tile was replaced to v-list-item at Vuetify 2.0 -->
        <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">Site</span>
        <span>Title</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 or yarn install to install dependent projects as vue and vuetify.

cd template4vutify
npm install

# run test server.

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

# references

Last Updated: 6/7/2021, 11:31:12 AM

← Make Vuetify 2.0 project by vue-cli 4 →