DEV Community

Cover image for The easiest way to make vuetify app with Toolbar, Navigation Drawer, Menu and QR code of your site!
Dr. Takeyuki Ueda
Dr. Takeyuki Ueda

Posted on • Updated on

The easiest way to make vuetify app with Toolbar, Navigation Drawer, Menu and QR code of your site!

1. create vue app with vuetify as usual.


2. add vuetify-nav

The vuetify-nav is an out-of-the-box Vuetify navigation menu component with Toolbar, Navigation Drawers, Menus, and QR code.


2.1 install vuetify-nav

Add it to your project as follows:

$ yarn add vuetify-nav
Enter fullscreen mode Exit fullscreen mode

2.2 import, export and use <Navbar/> component

Then, at your src/App.vue, import vuetify-nav at the very first of the <script> tag and export it as components as follows:

<script>
import {Navbar} from 'vuetify-nav'
export default {
  name: 'App',
  components: {Navbar},
  data: () => ({
    //
  }),
};
</script>
Enter fullscreen mode Exit fullscreen mode

Then, inside <template> tag, put <Navbar/> on the top of <main> tag as follows:

<template>
  <v-app>

    <Navbar/>
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>
Enter fullscreen mode Exit fullscreen mode

Finally, your App.vue should be as follows:

<template>
  <v-app>

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

<script>
import {Navbar} from 'vuetify-nav'
export default {
  name: 'App',
  components: {Navbar},
  data: () => ({
    //
  }),
};
</script>
Enter fullscreen mode Exit fullscreen mode

At browser, you can notice that the application has a toolbar as following.

Alt Text

Click the hamburger menu at the left top, you can see Navigation drawer as follow:
Alt Text


2.3 Add application title

You can add application title by titleStr props of <Nabvar> component. For example, by adding titleStr="My App" on your <Nabvar> at your App.vue as follow:

<template>
  <v-app>

    <Navbar titleStr="My App" />
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import {Navbar} from 'vuetify-nav'
export default {
  name: 'App',
  components: {Navbar},
  data: () => ({
    //
  }),
};
</script>
Enter fullscreen mode Exit fullscreen mode

You can notice that the title you specified is appeared as follow:

Alt Text

2.4 add navigation link

You can add navigation link by adding links props of <Nabvar> component. For example, add following links to the exporting data in the App.vue file as follow:

<script>
import {Navbar} from 'vuetify-nav'
export default {
  name: 'App',
  components: {Navbar},
  data: () => ({
    links: [
      { icon: 'home', text: 'Home', route: '/'},
      { icon: 'face', text: 'About', route: '/about'},
    ]
    //
  }),
};
</script>
Enter fullscreen mode Exit fullscreen mode

Then add links props to <Navbar /> as follows:

<Navbar titleStr="My App" :links="links"/>
Enter fullscreen mode Exit fullscreen mode

After this, the whole of your App.vue must be as follow:

<template>
  <v-app>

    <Navbar titleStr="My App" :links="links"/>
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import {Navbar} from 'vuetify-nav'
export default {
  name: 'App',
  components: {Navbar},
  data: () => ({
    links: [
      { icon: 'home', text: 'Home', route: '/'},
      { icon: 'face', text: 'About', route: '/about'},
    ]
    //
  }),
};
</script>
Enter fullscreen mode Exit fullscreen mode

At browser, you should see following navigation drawer.

Alt Text


3. for more detail

Please refer User Guide.
Also Github issues is available. Any questions, suggestions, request, and reports are welcome!

Discussion (1)

Collapse
jotcomponents profile image
Jotcomponents • Edited on

Unfortunatelly not working after installation - errors and security warnings with QR-code part