Vuetify: How to preselect active tab?

Question

I want to use Vuetify (v1.0.18) to render some static navigation using v-tabs. The routing is done on the server side, so I need a way to set the active tab

Answer 1

To achieve that you could store the current tab in the URL, either as a nested route or as a query parameter.

I end up using the latter solution quite often, to avoid creating a separate child component for each tab content. Here's how it works:

1. First useful step (but not 100% obligatory), is to name the tabs, so we can refer to them by name rather than ordinal number. This can be achieved by specifying href and value props as follows:

  
    One
  
  
    Tab content
  

2. Next we can store the current tab as query parameter using a computed property with a setter:

computed: {
  tab: {
    set (tab) {
      this.$router.replace({ query: { ...this.$route.query, tab } })
    },
    get () {
      return this.$route.query.tab
    }
  }
}

3. Now you can open a specific tab by following a link such as /page?tab=one (works for buttons, router links, to share a tab link with someone, etc.)

This solution applies to Vuetify.js 2.x. I wrote a short article with complete code example explaining it in detail: https://medium.com/untitled-factory/linking-to-a-specific-tab-in-vuetify-js-d978525f2e1a