Launching a new window using Vuetify's v-btn and Vue router

Vue Router's recent versions support opening links in new tabs, like the example below:

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

This code correctly creates a link with 

<a target="_blank">
.

However, using a Vuetify v-btn with router paths doesn't seem to work as expected, especially when trying to add 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 resolve this issue?

vue.jsvuejs2vue-routervuetify.js

Answer №2

If you want to open a new tab or navigate to an external link, make sure to use the href attribute instead of to. Here is an example:

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

Answer №3

If you find yourself needing to use the ":to" binding despite limitations (such as in our project where links are part of a v-for loop with no special handling for external routes), there is a workaround using the Vue default route to match URLs starting with "http". This rule should be added after internal routes, but before the catch-all 404 route (*). 

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

To implement this workaround in your component, use the :to tag with the desired value. For example, I utilize the "route" value from the following object in my project:

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

Answer №4

After trying different methods, I found success by including a specific target in the router object:

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

</v-btn>

Unfortunately, using @click and $router.push did not yield the same results.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Vue CLI 3 to enable popups in arcgis API JS

I've been attempting to enable popups from the ArcGIS API JS to show using the Vue-CLI 3 framework. Unfortunately, even with a simple sample code, I'm unable to make it function properly. Below is the code initially written in vanilla JS: <!DO ...

vue.jspopuparcgis-js-apivue-cli-3

Is there a way to remove specific items from my array in Vue.js?

Essentially, I am using an HTML select element that is populated with arrays of registered users. <label > <b> <i style="opacity:0.8">Users:</i> </b> </label>&nbsp;&nbsp; <select class=&quo ...

javascriptvue.js

Using Vanilla JavaScript and VueJS to smoothly scroll back to the top of a div when a button is clicked

I have a VueJS-based app that features a multistep form with a next button. You can check out the functioning of the app here: My current challenge is ensuring that once the user clicks the next button, the top of the following question becomes visible. I ...

javascriptvue.js

[Vue Alert]: Render Error - "TypeError: Unable to retrieve the 'getters' property of an undefined object"

Here is the code snippet from my app.js file. Can someone please review it and confirm if I have defined the items correctly according to the Vuex documentation? import store from "./store"; require('./bootstrap'); window.Vue = require( ...

vue.jsvuex

Using Vuex and array.findIndex but unable to locate a matching element

I am encountering an issue with the array.findIndex method. Despite being certain that there is a match in the array I am searching through, findIndex consistently returns -1. let index = state.bag.findIndex((it) => { it.id === item.id console. ...

javascriptarraysvue.jsvuex

The integration of VueJS with the Canva Button JS API amplifies the

I have been exploring Canva's Button JS API which can be found at My goal is to implement a modular approach in utilizing their API, only loading the CanvaJS when necessary. My implementation involves triggering the load function when a button is cli ...

javascriptvue.js

Server experienced 405 error during production usage, not during local testing

Upon testing my application on the live server, I encountered a 405 error when attempting to delete records: Request URL: http://ijsbrekerz.xxx/api/cards/10 Request Method: DELETE Status Code: 405 Method Not Allowed Remote Address: 185.xx.xx.xx:80 Referrer ...

laravelvue.jssql-delete

Problem with Vue app deployment in a subdirectory arises when the route changes from the specified publicPath

We are faced with a dilemma in our Vue application deployment to a subdirectory known as /deploypath/ Presently, our vue.config.js file looks like this: const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ publi ...

vue.jsubuntuwebpackvuejs2vue-router

Setting timeouts during Vue-cli unit testing can help improve the efficiency and accuracy of your tests

I have been running vue unit tests using the following command: vue-cli-service test:unit However, I am encountering an issue where some unit tests require a response from the server, causing them to take longer to execute. Is there a way for me to man ...

vue.jsnpmvue-cli

Error in Vue.js: Trying to access properties of an undefined object

My understanding of vue.js is limited, but based on what I know, this code should work. However, when attempting to access the variable in the data property, it seems unable to locate it. data: function() { return { id: 0, clients: [] ...

javascriptvue.js

Customize vue.config.js and webpack 4: modify the 'exclude' or 'include' parameters of a rule

I'm trying to customize the exclude/include parameters of a webpack rule in a project created using vue-cli-service. Since it only has a vue.config.js, I can access the configuration using chainWebpack, but modifying the rule directly is proving to be ...

vue.jswebpackwebpack-chain

I am having trouble getting PHP to parse JSON in the way I need

Currently, I am working on a hobby project that involves an API for accessing data. While everything seems to be functioning well on the other ends, I am facing an issue with the JSON array format. I need the JSON array to not have brackets so that I can e ...

phpjsonvue.js

Vue cookies experiencing issues with updating cookie values correctly

My goal is to store user preferences (maximum 2-3 users) in a cookie for easy access. Upon login, I first check if the 'users' cookie exists. If not, I create it. If it does exist, I check if the current user is included in the cookie. If not, I ...

vue.jsparsingcookiessplicevue-cookies

Issue: In Vuetify, the child component 'v-tabs' is displaying an offsetWidth value of 0

To showcase the issue, I have created a codepen: https://codepen.io/anon/pen/vzqgJB Within the Vuetify v-app, there is a router-view. <div id="app"> <v-app> <v-content> <v-container> {{$route.path}} &l ...

vue.jsvuejs2vue-routervuetify.js

I am looking for a feature similar to a computed property that allows me to update the data after the initial change

I am facing a situation where I need to update data whenever changes are detected in a state. The user should have the ability to further edit this information within a textarea. Although using computed properties fetches the data exactly as desired, any m ...

vue.jsvuejs2vuex

The function to focus on this.$refs[("p" + index)] element is not available

I need help transforming a div into an input box when clicked, allowing me to edit the post inside a loop. Here is the button found on the post: <a @click="setFocusEdit(index)" v-if="isAuthor(post)" href="#" >Edit Me</a> And here is the spec ...

javascriptvue.jsvuejs2vue-componentv-for

Creating: A Pair of Vue Components with Matching Sass Styles

As I ponder on the best way to structure my Vue components, I am faced with a dilemma. Two of my Vue components share the same sass code, yet they have different markup, state, and methods. I am seeking a solution to reduce repetition of sass code across t ...

vue.jssassvuejs2vue-componentmixins

What is the best way to send information to a component using Props in Vue2?

Recently, I created a .Vue file to showcase information about a cafe on the Cafe Details Page. However, to streamline template updates, I decided to extract certain parts of this details page and turn it into its own component. This led me to create a new ...

javascriptarraysvue.jsvuejs2vue-cli

Looking to eliminate the bullet point next to the labels on a highcharts graph?

I have implemented a Highcharts solid gauge in my project, and you can view a sample image https://i.stack.imgur.com/QQQFn.png However, I am facing an issue where unwanted grey bullets are appearing in the test environment but not locally. I have checked ...

javascriptvue.jshighcharts

Vue.js HTTP POST request not correctly sending object data

I created a Vue.js App that looks like this var vueCommentApp = new Vue({ el: '#Commentdiv', data: { newComment:{"userCommentID":0,"siteurlID":1,"userId":"","userName":"Guest","commentPageT ...

httpvue.jsasp.net-core-mvc