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 preselect an active tab:

   
     
       {{tab.name}}
     
   

The script part:

  export default {
    data: () => ({
      active_tab: 2,
      tabs: [
        { id: 1, name: 'tab1' },
        { id: 2, name: 'tab2' },
        { id: 3, name: 'tab3' }
      ]
    })
  }

See it in action here

Note: We have preselect the tab with name tab3.

Keep in mind that vuetify will set the active_tab to the index of the active tab. So the index of the item with id 3 is 2 because it's starting from 0.

For this example I used vuetify version: 1.1.9