I'm experiencing a strange problem with Nuxt and Netlify with static generation on a JAMstack e-commerce.
I pushed my website on Netlify and everything went good, no error on console in the generation phase.
When i visit the generated site on desktop everything is fine and loaded correctly.
On mobile instead the content disappears! The dynamic content fetched from Prismic during generation won't load if navigate from the homepage (need to reload the page in order to view them).
I'll leave a netlify preview link of the build so you can experiencing the same problem.
Load the homepage (on mobile) and click the button "Shop Now", you'll see a page with no content; try reloading the page and everything will come back to normal.
I noticed that if you refresh or land in a page that it's not the homepage and start navigating the site everything works fine, so the problem only occurs when the start of navigation is from the homepage on mobile! Furthermore, if you land on the homepage, go to Shop Now, and then go back without reloading, even the content on the homepage disappear!
https://60352eb4c2e7180007325b89--leconturbanti.netlify.app/en
I can't understand why since there is no console error anywhere. While on desktop everything is fine. There's no css hide rule, no v-if for mobile, nothing. It seems like there's a bug on Nuxt hydration?
Anyone having the same problem?
Related
So, I've built an SPA with Vue. We hire a designer to create a landing page. The landing page looks great. It shows some info about the app and there is a "Sign in" button that does nothing at the moment.
The landing page does include CSS and Javascript (jQuery etc) that I don't, and don't want to, use in the Vue app.
So the question is: Is it possible to include the landing page code in my Vue project without loading landing page JS/CSS if user is already signed in?
Plan B for me is to host the landing page on mydomain.com and the app on app.mydomain.com. This will work I guess, I see others do this. But it would be nice to know my possibilities
Did some search and didn't find exact solution to your issue, however it seems that this is doable. I have some concerns regarding the head part of the page, but this is a way to start:
Create new Vue component that will include all the HTML code (body only) that you need + install (with npm) and import all needed js files, including jQuery, in that component.
Make sure, that you configure this component as lazy loaded in vue-router - so all your html and scripts will be separated from the app.
From there Vue should do the job - you will get your page where needed and other routes will be inside the app.
I have a PWA (specifically concerned about iOS Safari at the moment), where when I add the PWA to my homescreen, the page I was on when I added it shows up like a native app. However, when I navigate within the PWA (same domain just new pages) the URL bar shows up.
This post was similar, but mentions it's for chrome/android.
PWA: Address bar showing up when redirectioning to subdomains -- and, as I understand it, iOS doesn't use all of the manifest file. I tried setting the scope, but no luck.
I have the necessary head elements in for showing a standalone (like I said, the initial page when I saved the PWA to the homescreen works fine).
Any ideas how to fix this?
I was able to resolve this by undoing the router mode history and reverted back to # hash-based routing.
I'm using Vue, so basically I just undo what I did here
https://router.vuejs.org/guide/essentials/history-mode.html
The app page located under the apps tab is not rendering correctly. The request is coming in fine with the signed payload but the iframe (that loads the load URL) renders an empty page every time I visit the app page.
I try opening the exact page in a new tab and it's rendering fine:
https://staging02.pathdefender.com/app/bigcommerce/load?signed_payload=eyJ1c2VyIjp7ImlkIjo0NDA2MTYsImVtYWlsIjoiZGVubmlzQHRydXN0ZWRzaXRlLmNvbSJ9LCJjb250ZXh0Ijoic3RvcmVzL24yaXMwYTRjIiwic3RvcmVfaGFzaCI6Im4yaXMwYTRjIiwidGltZXN0YW1wIjoxNDQyODYyNjQzLjk4MzgyNTR9.MjFmNWFhZGU4ZjkyN2NkY2I4YzEwOTkyNzdjYjA4ZGU0OWE5MjU4MzRlZTYwNDc4ODNhNzU2MDliYWJlMmZlZA==
Do you know what's wrong with the page?
I have created a sample application with login page and home page.
i have loaded the login page as Main Page successfully and i have homePage.html/homePage.js files. What i need to do is, when i click on Login button from loginPage.html file, user should navigate to Home Page. I couldn't see any APIs fro navigate/load to different html files.
i referred some worklight samples it says loading on same HTML using div and pageport commands.
$("#pagePort").load("pages/homePage.html", function(){
alert("Home Page Loaded")
});
Can any one help me to get resolve, how we can load another html on click of login button?
Worklight is a single DOM application, hence the notion of "pages" is an artificial one.
You have 1 singular HTML file and what you need to do is replace content inside it to display different content, or "pages".
There are numerous ways you can accomplish this. None of them relate directly to Worklight, but to the framework you select to work with, be it jQuery, jQuery Mobile, Dojo, Ionic and so on...
The important thing to remember is to never navigate away from the index.html file because you will then "lose" the Worklight context and your application will then fail loading. The reason is because from the index.html file, you load various required Worklight-related files.
In this Worklight 6.2 project I demonstrate, using jQuery Mobile, how to navigate between pages. For your purpose, think of them as a mainpage that is a login page and then some other page that is the home page...
Related:
https://stackoverflow.com/a/25060136/1530814
https://stackoverflow.com/a/22171687/1530814
We have an existing live MVC 4 website that works exactly as it supposed to, running in an Azure Web Role.
A third party want to embed our site in an iFrame on their site (a small part of it anyway, one form really)
I'm no fan of iFrames but this is what they want to do and our business are happy for them to do it.
Except it doesn't seem to work at all.
So I tested it myself with an html page just running on my machine.=, with just an iFrame and a link to the site.
The default page loads fine. It is a forms login screen, when I submit a login, the site crashes into the exception handing and it doesn't provide much useful information.
I then tried pointing the iFrame at the site running in my dev environment. Submitting the login and debugging into the action, the code flows through correctly, no error and tries to return the correct view, but iframe refreshes to the login screen again.
What could be causing this? What am I missing?