Vuetify tabs working with Vue Router

This is the simple guide I wish I had when I was trying to make a mobile nav bar using Vuetify.

tl;dr: here’s the working code

A simple example

There isn’t an example navbar working with vue-router in the docs, but the API makes it pretty easy. Starting with the 5th mobile tab bar template , here’s how a simple working template could look.

<div id="app">
  <v-tabs grow light>
    <v-tabs-bar>
      <v-tabs-item href="/" router>
        <v-icon>motorcycle</v-icon>
      </v-tabs-item>
      <v-tabs-item href="/dog" router>
        <v-icon>pets</v-icon>
      </v-tabs-item>
    </v-tabs-bar>
  </v-tabs>
  
  <router-view />
</div>

All you need to turn the <v-tabs-item> into a nav bar is to add the router prop. That’s it. Essentially, that turns the tab into a router-link. You can use the to prop in place of the href, but you don’t have to.

Oh, and one more thing. Instead of using <v-tabs-content>, you can delete that and put <router-view> anywhere outside of it. Give it a try!