Vue.js, How to open a link in a new tab

In this tutorial, we are going to learn about how to open a link in a new tab in Vue.js app.

Normally, we create a link in Vue app using the <route-link> component with the to attribute.

<router-link to="/contact">Contact</router-link>

If we click on the above link, it will open a Contact page in the same tab.

Opening the link in a new tab

To open the link in a new tab, we need to add the target attribute with a value _blank to the <router-link> component.

Here is an example:

<router-link to="/contact" target="_blank">Contact</router-link>

In programmatic navigation, we can open the link in a new tab like this:

<template>
  <div id="app">
    <button @click="gotoContact()">Contact</button>
  </div>
</template>

<script>
export default {
  name: "app",
  methods: {
    gotoContact() {
      let route = this.$router.resolve({ path: "/contact" });
      window.open(route.href);
    },
  },
};
</script>

In the example above, we first accessed the full URL of a /contact page by using the this.$router.resolver() method then passed it to the window.open() method.

Opening the external links in a new tab

To open the external link in a new tab, we can use the HTML anchor element <a> by passing target="_blank" attribute.

<a href="https://www.google.com" target="_blank">
   Google
</a>

If you are using target=_blank for external links, your page performance may suffer to avoid that you can use rel="noreferrer noopener".

<a href="https://www.google.com" target="_blank" rel="noreferrer noopener">
   Google
</a>

In programmatic navigation, we can use the window.open() method to open the external links in a new tab.

Here is an example:

<template>
  <div id="app">
    <button @click="gotoGoogle()">Google</button>
  </div>
</template>

<script>
export default {
  name: "app",
  methods: {
    gotoGoogle() {
      window.open("https://www.google.com");
    },
  },
};
</script>