The easiest way to make vuetify app with Toolbar, Navigation Drawer, Menu and QR code of your site!
Tags: vuetify, toolbar, navigationdrawer, qrcode
Published: 2021-06-07 11:21:40

---
title: The easiest way to make vuetify app with Toolbar, Navigation Drawer, Menu and QR code of your site!
published: true
description: How to make vuetify application skeleton with toolbar.
tags: vuetify, Toolbar, NavigationDrawer, QRcode
cover_image: https://github.com/UedaTakeyuki/vuetify-nav/blob/main/img/ss.2021-05-28_8.26.18.png?raw=true
---
## 1. create vue app with vuetify as [usual](https://dev.to/takeyukiueda/how-to-make-a-simple-spa-base-project-with-vue2-vue-router-and-vuetify-2l5n).

***

## 2. add [vuetify-nav](https://www.npmjs.com/package/vuetify-nav)

The [vuetify-nav](https://www.npmjs.com/package/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:
```bash
$ yarn add vuetify-nav
```

***

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

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

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

```vue
<template>
  <v-app>

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

Finally, your ``App.vue`` should be as follows:

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6mc99bucwfrzrbktciq.png)

Click the hamburger menu at the left top, you can see  **Navigation drawer** as follow:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2vrbz2xbc1ishnxi8mr.png)

***

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

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sq2rv0pvabw5uo11qwyt.png)

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

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

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

```vue
<Navbar titleStr="My App" :links="links"/>
```

After this, the whole of your ``App.vue`` must be as follow:
```vue
<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>
```

At browser, you should see following navigation drawer.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbqrp014y6eia205fzle.png)

***

## 3. for more detail
Please refer [User Guide](https://github.com/UedaTakeyuki/vuetify-nav/wiki/Users-Guide).
Also Github [issues](https://github.com/UedaTakeyuki/vuetify-nav/issues) is available. Any questions, suggestions, request, and reports are welcome!