I have been using Nuxtjs for a while in many of my projects, but I can't seem to figure how to achieve this. I want to prevent the user from viewing a content web they load my website until everything is ready, like what happens in the Google Adsense website https://ads.google.com. I want to display an animation until everything is loaded before removing the animation
Related
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().
This is as messy as it sounds...as it doesnt seem to be answered by other questions related to forcing a refresh in a vue app (but happy to be proven wrong).
I have a simple page utilizing some jquery which is loading a 3rd party vuejs app. The 3rd party app is loading correctly and working well.
The problem is if a link is clicked in the 3rd party app which is working through the vue-router. Although I see the url changing as per normal vue-router functionality but the view/template itself is not updating/changing.
If at that point I call a location.reload() then the page will reload and the correct template will display. However this is very slow and am trying to find out why the view is not refreshing under these conditions.
It obviously has something to do with the fact that I am generating the vueapp via external scripts but cant pin down what the issue is.
Is there some way I can force the view to refresh without reloading the whole page?
Thanks
Turns out that there was something else going on here.
After the external vue app was loaded, some innerhtml content was being modified by my external script. Nothing directly related to the app but this seemingly broke the underlying app.
Stopping to do the replacements has the underlying app working as expected.
I have a requirement where we need to personalize the carousel in the home page, based on the location from where the website is accessed.
For this I have created required segments and activity and brand, and targeted to the carousel component. The issue I am facing here is that the /etc/cloudsettings/default/contexthub.kernel.js is loading after all the client libs in my project is loaded, so the carousel images are getting updated but not displayed in the form of slides, but one below the other.
Is there any event which can be captured by js and then reload the owl-carousel.js?
Could someone please suggest any fix for this?
I've built an app for Shopify which displays in a page in a store's admin section. The way that works is that an html page from my server is displayed inside an iframe on the Shopify admin.
When any page is loaded in the Shopify admin, a blue progress bar displays at the top; usually it progresses across the page pretty quickly and is gone. On my page, however, the bar progresses across the page very slowly and never finishes. My page is very small, and it displays almost instantaneously.
It seems like Shopify is looking for something in the background, but I don't know what it is. Do you know?
You can stop the blue loading bar by calling ShopifyApp.Bar.loadingOff(). It would also be stopped if your app uses ShopifyApp.Bar.initialize(config).
I have a website which uses backgroundstretch to display a slideshow on the background of the website. I use a normal Yii website structure where the content is displayed by: , according to the url.
Now because of the reload the slideshow starts all over again when I go to another page. Is there a way to display the new pages without having to reload the background?
Thanks in advance!
It might be possible to load pages using ajax and replace the existing content on top of your rotating slide show, but it would likely be a big architectural change to your website.
Instead you might try storing the current slideshow index in a cookie, and when you load your next page, start the slideshow on the current image instead of the first image.