Sometimes, we want to use Vuetify tabs with Vue Router.

In this article, we’ll look at how to use Vuetify tabs with Vue Router.

How to use Vuetify tabs with Vue Router?

To use Vuetify tabs with Vue Router, we can set the to prop of the v-tab component to a Vue Router route path.

For instance, we write

<template>
  <v-tabs v-model="activeTab">
    <v-tab v-for="tab in tabs" :key="tab.id" :to="tab.route" exact>
      {{ tab.name }}
    </v-tab>
  </v-tabs>
</template>

to set the to prop of each v-tab component to tab.route where tab.route is the path to a page as we defined in the routes array when we created the VueRouter instance.

Conclusion

To use Vuetify tabs with Vue Router, we can set the to prop of the v-tab component to a Vue Router route path.