Vue Js Link

Posted on  by admin

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 component with the to attribute.

If we click on the above link, it will open a Contact page in the same tab. To open the link in a new tab, we need to add the target attribute with a value _blank to the component.

Here is an example:. In programmatic navigation, we can open the link in a new tab like this:. 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 method.


To open the external link in a new tab, we can use the HTML anchor element by passing target="_blank" attribute. If you are using target=_blank for external links, your page performance may suffer to avoid that you can use rel="noreferrer noopener".

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

Here is an example:. You’re browsing the documentation for v2.x and earlier. For v3.x, click here. You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements.

Value Bindings