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

vue.js vuejs2 vue-router vuetify.js

Andrew Mao · Apr 4, 2018 · Viewed 44.2k times · Source

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

Try the following code snippet

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