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?

Solution 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

Solution 2

There is a workaround possible if you absolutely must use the ":to" binding (like in our project the links are a part of v-for with no special handling for external routes) using Vue default route which matches everything beginning with "http". Add this as the last rule after your internal routes but not after your catch-all 404 route (That matches * )

{
// This is a hack to use :to tag for absolute paths.
path: "/http*",
beforeEnter: to => {
  window.open(to.fullPath.substring(1), '_blank');
}

Then in your component, add :to tag to use the value. For example: In my project, i use the value "route" from the following object

 {
    title: "Help",
    detail: "Get online help and documentation.",
    icon: "mdi-help",
    color: "success darken-2",
    route: "https://www.confluence.myorg.com"
  }

Like so

<v-btn :color="l.color" text :to="l.route">