CODEWITHSUNDEEP
vue.jsvuejs2vue-routervuetify.js
Andrew Mao
Andrew Mao

Reputation: 36900

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

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?

Upvotes: 46

Views: 109996

Answers (4)

Beatriz Lisboa Sanchez
Beatriz Lisboa Sanchez

Reputation: 1

Adding a target to the router object worked for me:

<v-btn
:to="{ name: 'Edition', params: { id: item.id }, target: '_blank'}"
>

</v-btn>

It doesn't work with @click and $router.push, though

Upvotes: 0

Gedeon Mutshipayi
Gedeon Mutshipayi

Reputation: 4073

To open a new tab or an external link, use the href attribute instead of to, for example:

<v-btn
    href="https://letesend.com/"
    target="_blank"
    icon
>
    <v-icon>window</v-icon> Link Text
</v-btn>

Upvotes: 8

Luv
Luv

Reputation: 496

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">

Upvotes: 1

Dinozzo
Dinozzo

Reputation: 1021

Try the following code snippet

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

Vuetify Button API

Upvotes: 101

Related Questions