Vue.Js Open link in new tab– To open a link in a new tab in Vue.js, you can use either the HTML “target” attribute set to “_blank” in the anchor tag or use the JavaScript “window.open” method to open the link in a new window. With the target attribute, the link will be opened in a new tab by default if the user’s browser settings allow it.
Vue.Js Open External Links In New tab
Open link in new tab Example
<a href="https://fontawesomeicons.com/" target="_blank">
Fontawesomeicons
</a>
If you face performance issue you can use rel=”noreferrer noopener” attribute as below.
<a href="https://fontawesomeicons.com/" target="_blank" rel="noreferrer noopener" >
Fontawesomeicons
</a>
Open Link in New tab using “window.open”
This code imports the Vue.js library, creates a Vue.js application, and adds a button to the webpage. When the button is clicked, it opens a new window to the specified URL using the window.open() method. The data() method defines an object with a url property set to the URL of fontawesomeicons.com, and the goToLink() method opens that URL in a new window.
Vue Js Open link new tab example
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<div id="app">
<button @click="goToLink" >Go to fontawesomeicons.com</button>
</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data() {
return {
url:"https://fontawesomeicons.com/"
}
},
methods:{
goToLink(){
window.open(this.url);
}
}
}).mount('#app')
</script>
