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
Related
I'm trying to create a route for an overlay. This overlay is toggled when pressing a button in my nav. Since its background is transparent/blur, it cannot be a separate site.
My goal is to make google register this path on my sitemap, therefore displaying it as a site link in its search results.
I am using Gridsome.
In Gridsome, I am basically looking for Vue's nested route functionality (or Nuxt's child-view) to achieve something like this /:userId/profile and /:userId/posts for example. And since Gridsome uses Vue Router there should be a way to achieve this I believe
Let me try to explain what I am trying to build with Gridsome:
At mywebsite.com/ I want to show a Grid of images showing thumbnails of my video portfolio. When you then click on a thumbnail I want a modal to pop-up showing the video. The modal is semi transparent showing the portfolio in the background. So far so good.
But for people to be able to share the URL of the respective video, I need the path changing to mywebsite.com/video-1 and so on. When I then close the modal the path should be mywebsite.com/ again. This is something I already achieved within Nuxt with <child-view>.
Is there some similar functionality in Gridsome? I appreciate your help.
From the feedback you got here:
Gridsome doesn't support child routes yet. But you can kind of achieve what you want if you create a new content type called User and add each user as a node. Then generate pages for them with the Pages API. The pages you create can share a layout component.
In the same way, you can also generate pages for each video for having direct URLs to them. And use the $fetch() method to load a video in a pop-up. Or just query the videos in the front-page query instead of using $fetch().
I have this device data that are shown in real time using ThingsBoard.
And I have an iframe to show the device data content on a web page.
If I used the same iframe on my ionic app's HTML page, I am getting all the header, submenu and other unnecessary things that are not needed in the app.
What I need is the main content area of the device data section.
Can I do that with the iframe or do I need to call all the individual ThingsBoard API's to populate the dashboard on my own?
If you are managing the Thingsboard then you can develop custom iframes with unnecessary headers/footers removed. Then you will get clean iframes to display inside your Ionic app.
In case the Thingsboard is not managed by you then you have to develop adapters to scrape the html data from the Webpage. These adapters will provide your Ionic app only the data you require.
You can use PHP Simple HTML DOM Parser for implementing these data scraping adapters.
PHP Simple HTML DOM Parser
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
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.