Vue Js Open Link in new Window (not Tab):To open a link in a new window (not a tab) in Vue.js, you can use the window.open() method in combination with Vue’s event handling. Firstly, create a method that triggers when the link is clicked. Inside the method, use window.open() and pass the URL as the first parameter, and specify the target as the second parameter using "_blank" and the desired window features as the third parameter. This will open the link in a new window instead of a new tab. Remember to bind this method to the appropriate event in your Vue template.
How can I open a link in a new window using Vue.js, rather than in a new tab?
In this code, the window.open function is called directly with the URL ('https://fontawesomeicons.com') as the first parameter. The second parameter ('_blank') specifies that the URL should open in a new window. The third parameter ('width=500,height=500') sets the dimensions of the new window.
Additionally, a check is added to ensure that newWindow is not null before calling newWindow.focus(). This check prevents an error if the browser’s pop-up blocker prevents opening a new window.
Vue Js Open Link in new Window (not Tab) Example
<div id="app">
<button @click="openLink">Open Link</button>
</div>
<script type="module">
const app = new Vue({
el: "#app",
methods: {
openLink() {
const newWindow = window.open('https://fontawesomeicons.com', '_blank', 'width=500,height=500');
if (newWindow) {
newWindow.focus();
}
}
}
});
</script>
Output of Vue Js Open Link in new Window (not Tab)
