Nuxt: How to open page in a new tab - vue-router

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.

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:
User

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 link to external page

Related

Vue/Nuxt Routing issue: Why does "wrong" component load during a specific route?

Can someone tell me why the following component is loaded when I refresh the browser?
Sandbox link: https://codesandbox.io/s/lucid-darkness-vwklt?file=/pages/index.vue
Let me explain.
What I want to happen and my expected output:
1.) Click "doss" --> Profile and Settings --> [The Profile Page with data is shown]
2.) Then, REFRESH/RELOAD the browser, the profile page is STILL shown with the same data
3.) The URL did not change.
What actually happens and the unexpected output:
1a.) Click "doss" --> Profile and Settings --> [The Profile Page with data is shown]
2a.) Then, REFRESH/RELOAD the browser, the profile page is NOT shown but instead another component is loaded with the title "The Post Detail Page" .
3a.) The URL did not change.
Why does #2a happen? The URL has not changed but the component did.
What am I doing wrong? Here is my NuxtJS folder structure:
To add a dynamic route in Nuxt, create a file starting with a dash. You already did that, which is totally fine, like;
_myPage.vue or add a folder named _myPage containg a index.vue file inside.
But your example won't work because nuxt is missing the "doss" route from your link / menu item.
Working example;
https://codesandbox.io/s/holy-voice-6pofd?file=/pages/doss/_displayName/index.vue
URL path will result in /doss/xxx
Also see; Nuxt dynamic pages

Vue.js open a link in a new tab with dynamic html

I have a application in Vue.js with a bunch of links in a navbar.
Each of the links need to open a new tab with some html that is specific to the link.
How could I implement this in Vue.js? I am thinking theres a way with vue router, but I am building the page dynamically with whatever html I get back from a server, so I'm not seeing how to do it.
Thank you

How to handle new tab opening with Splash?

I'm scraping website which has a very annoying link (<a> HTML tag) - it opens the small pop-up form on click and after submitting it, opens new browser tab (and switches focus to it) with URL that I need, and also redirects old tab to another page.
Successful submitting of the pop-up form was easy, but I don't know how to get URL of this new tab.
And as the documentation says, Splash can work only with one tab, so is it impossible to do that?
As Splash's developer comments on this GitHub issue this feature is not implemented.
But I posted my solution to this problem on the same issue.
Example:
function main(splash, args)
assert(splash:go(args.url)) -- execute JS code below only after loading the page
splash:runjs("var newTabURL")
splash:runjs("newTabURL = null") -- sometimes JS can't find variable without this line
splash:runjs("window.open = function(url){newTabURL = url}")
-- actions which open the new tab
local new_tab_url = splash:evaljs("newTabURL")
-- other actions
end

Reusable Pentaho dashboard side-bar

I have added a side bar like this one onto a CDE dashboard.
https://bootsnipp.com/snippets/featured/responsive-navigation-menu
Now the sidebar needs to be on every page listed on the menu.
What is the best way to go about this?
I could copy it on every single dash board - it works but it's not great especially if I need to change stg ex-post.
Create an "index" page with the side bar and an iframe to display the "sub" dashboards?
Create a widget (I tried but no success so far)
Custom component?
I think I solved the problem by using jquery load like these guys did.
Include another HTML file in a HTML file

How to change the url of my entire page when a new tab is selected? (Dojo-Tabcontainer)

I have used Dojo-Tabcontainer to create tabs. I want to have a separate template for every tab. So, when a tab is clicked I want a new page to be loaded and the url to be changed.
Can you please suggest a way to do this using Markup instead of programmatic way?
I'm thinking of using Template Inheritance while creating html page for each tab to avoid redundancy.
I can get some clue from this:
How to change Dojo TabContainer behaviour to simply open an external link instead of showing a ContentPane?
But I'm not sure how to do it via Markup instead of programming.