Is there a way to open an inertia link in a new tab like it's possible in anchor tags:

<a target="_blank" rel="noopener noreferrer"></a>

This doesn't work:

<Link :href="..." target="_blank">

Is there a way to open an inertia link in a new tab like it's possible in anchor tags:

<a target="_blank" rel="noopener noreferrer"></a>

This doesn't work:

<Link :href="..." target="_blank">

• javascript
• vue.js
• routes
• vuejs3
• inertiajs

• 3 I think using a regular anchor tag <a target="_blank"> should work just fine. Is there any reason you need to use the <Link> ponent? – cdruc Commented May 31, 2022 at 20:20

4 Answers 4

I don't believe this is possible - so a standard anchor tag is the way to go.

This is because Inertia doesn't really need to be involved if a link will be opening in a new tab, since it doesn't have to intercept the click and perform its own server request.

Confirmed by Inertia's developer in this github issue: https://github./inertiajs/inertia/issues/1096

Seems to have the same problem here
But it was a long time ago
I'm not sure which dependency version you're using now
is patible with the issue
But you can see if that helps you
React-Router open Link in new tab

Try the following

Javascript:

const newTab = (e) => {
    e.preventDefault();
    window.open(route('the_route_you_want'));
}

In ponent:

<Link onClick="newTab">Open new window</Link>

The @thomas-lo answer really helped me solve the issue. I just modify it a little so we could modify the url on the Link onClick event. Define this function:

const handleOpenNewTab = (href) => {
    window.open(href, '_blank');
};

and in the ponent:

<Link
     href="#"
     className="flex items-center"
     onClick={(e) => { e.preventDefault(); handleOpenNewTab('/my/url') }}
>
    print Pdf
</Link>