CODEWITHSUNDEEP
vue.jsvuejs3nuxt3.js
Khaled
Khaled

Reputation: 49

Nuxt 3 navigateTo method to open in a new tab

I want to redirect the user to an external link in a new tab using the navigateTo method. I couldn't find an option to do that similar to having target="_blank" in the html tag <a href="https://google.com" target="_blank"> for example

is there is a way to add such a parameter to the navigateTo method?

<script lang = "ts" setup>
 function onEventTriggered() {
    return navigateTo('https://google.com', {
      external: true,
    })
  } 
</script>

Upvotes: 2

Views: 4610

Answers (2)

Felix Dolderer
Felix Dolderer

Reputation: 471

The behaviour you seek is described in the documentation here: https://nuxt.com/docs/api/utils/navigate-to#navigating-using-open

Use it like this:

navigateTo('https://google.com', {
  external: true,
  open: {
    target: "_blank",
  },
});

Upvotes: 3

kissu
kissu

Reputation: 46677

I'm not sure that you could use a method called navigateTo to "open" something in another tab, would be quite non-intuitive and strange because of it's naming.

You can try this approach tho, to simulate the exact same thing without even needing to add it to the DOM

<script setup>
function openExternal(endpoint) {
  const link = document.createElement('a')
  link.href = endpoint
  link.target = '_blank'
  link.click()
}
</script>

<template>
  <button @click="openNewTab('https://google.com')">
    Open in new tab
  </button>
</template>

Upvotes: 1

Related Questions