Nuxt: How to open page in a new tab

Question

I go through the documentation of Nuxt, but couldn't find information about how to open a page in a new tab. Is there a way to open a link in a new tab instead of opening it in the current tab? I tried the following code:

<nuxt-link to="/user" target="_blank">User</nuxt-link>

But it doesn't work.

Adding attribute `target="_blank"` [now works](https://stackoverflow.com/a/49654382/2278963) — anthonygore, Nov 28 '20 at 00:28

score 41 · Accepted Answer · answered Apr 19 '19 at 02:09

41

The whole point of vue-router is navigating inside a single page application so it doesn't have a way to navigate to a blank new tab as far as I know. Fortunately there is an old fashioned thing called 'html' which has something called an anchor tag that you can use like this:

<a href="/user" target="_blank">User</a>

answered Apr 19 '19 at 02:09

Andrew1325

3,519
1
14
25

9

Love your cynicism – ElPapi42 Aug 06 '20 at 20:50
1

Nuxt 3 Nuxt-link adds the rel=”noreferrer noopener” to external links, so it is advised to use NuxtLink for external links as well, if you're using Nuxt 3 – Miguel Stevens Jan 03 '23 at 06:01

devzom · Answer 2 · 2023-01-25T12:22:19.497

17

As @anthonygore pointed out in a comment to first post. It's now working to open link in a new tab by , having all the features of router name/path link

do it with by adding target="_blank" to/inside NuxtLink to have

<NuxtLink :to="..." target="_blank">Nuxt link to external page</NuxtLink>

or just use default

<a href="..." target="_blank">A link to external page</a>

edited Jan 25 '23 at 12:22

answered Mar 16 '21 at 12:50

devzom

676
1
9
19

1

I think the closing tag in the upper example should be ` ` instead of `` – aknott Jan 25 '23 at 09:03

score 0 · Answer 3 · answered Aug 22 '23 at 06:43

0

<a href="./user" target="_blank">User</a>

Note that the path should start with dot. If the website is not at root.

answered Aug 22 '23 at 06:43

Epic Chen

1,282
12
17

Nuxt: How to open page in a new tab

3 Answers3