How to use Vuetify tabs with vue-router

Question

I have the following jsfiddle that has two Vuetify tabs. The documentation doesn't show examples on using vue-router with them.

I found this Medium.com post on how to use Vuetify with vue-router, which has the following code:

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

However, the code is now outdated as the Vuetify 1.0.13 Tabs documentation doesn't specify a router prop in their api, so the embedded example in the post doesn't work.

I also found this StackOverflow answer which had the following code:

<v-tabs-item :to="{path:'/path/to/somewhere'}"> 

However, using the to prop doesn't work and it's also not listed in the Vuetify api. In contrast, the v-button Vuetify component does list a to prop and utilizes vue-router, so I would expect a vue-router supported component to support the to prop.

Digging around in the old old Vuetify 0.17 docs, the to prop is specified for v-tabs-item. It seems that support might have been removed in 1.0.13.

How can I use vue-router with Vuetify tabs?

Answer 1

Update

Holy wow! I asked the Vuetify community to add documentation to their api, and it looks like they just added the to prop as well as other vue-router props to the Vuetify tabs docs. Seriously, the community there is awesome.

Original Answer

The folks in the Vuetify community Discord were able to help me out. My updated jsfiddle now has the working code.

Essentially, v-tab is a wrapper for router-link, where I assume it uses slots to pass props to router-link, so putting the to prop on v-tab works fine.

The following code is an example of the working code:

html

<v-app dark>   <v-tabs fixed-tabs>     <v-tab to="/foo">Foo</v-tab>     <v-tab to="/bar">Bar</v-tab>   </v-tabs>   <router-view></router-view> </v-app> 

js

const Foo = {   template: '<div>Foo component!</div>' };  const Bar = {   template: '<div>Bar component!</div>' };  const routes = [   { path: '/foo', component: Foo },   { path: '/bar', component: Bar }, ];  const router = new VueRouter({ routes });  new Vue({   el: '#app',   router, }); 

Result

Answer 2

The template part:

<div>     <v-tabs       class="tabs"       centered       grow       height="60px"       v-model="activeTab"     >       <v-tab v-for="tab in tabs" :key="tab.id" :to="tab.route" exact>         {{ tab.name }}       </v-tab>     </v-tabs>     <router-view></router-view> </div> 

And the js part:

  data() {     return {       activeTab: `/user/${this.id}`,       tabs: [         { id: 1, name: "Task", route: `/user/${this.id}` },         { id: 2, name: "Project", route: `/user/${this.id}/project` }       ]     };   } 

Routes:

{   path: "/user/:id",   component: User1,   props: true,   children: [     {       path: "", //selected tab by default       component: TaskTab     },     {       path: "project",       component: ProjectTab     }   ] } 

See codesanbox example