Open link in new window with Vuetify v-btn and Vue router

Question

Recent versions of Vue Router allow for links that open in a new tab, e.g. the following

<router-link :to="{ name: 'fooRoute'}" target="_blank">   Link Text </router-link> 

correctly renders an <a target="_blank">.

However, the same doesn't seem to work with a Vuetify v-btn, which supports router paths, for example if we want to use an icon.

<v-btn icon :to="{ name: 'fooRoute'}" target="_blank">   <v-icon>window</v-icon> Link Text </v-btn> 

Despite the component rendering an <a>, there is no target="_blank" attribute. How can we make this work?

Answer 1

Try the following code snippet

<v-btn icon href="/fooRoute" target="_blank">    <v-icon>window</v-icon> Link Text  </v-btn>

Vuetify Button API