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,
});