Vue.Js Open link in new tab

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.




Thanks for your feedback!
Your contributions will help us to improve service.
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>