I have problem with Vue spa.
App work fine, when I go from some page to another.
App is e commerce and when I copy direct link of some product and send to someone I take to much time lo load that page, but when I click from list of product to specific product it load immediately.
Only direct link took too much time to load - like 10 sec.
I try remove some load function from page, but it's the same problem.
Are you using lazy loading in your app? If not, Vue Router will try to load all pages when the site is first opened.
You can see browser's console on network section
If you see that the files of all pages are loaded when the site is first opened, you are not using lazy loading.
That's all I can think of from the information you provided, I hope it helps.
Vue Router Lazy Loading
Related
I would like to make a page with Vue 3 where a user could start an upload of a (very large) file, and after that he's able to go to other pages while the upload is still going on in the background. A plus would be a small widget showing me progress anywhere on a website, and a notification when the upload has completed.
I may have found something, but it's written only for Vue 2: https://github.com/Akryum/vue-router-multi-view
Well, the solution was actually quite simple... I've just put the upload component outside the router component in the main app template and everything worked.
Just finished learning Vuejs and after visiting a few websites that use Vuejs like;
a) https://coderstape.com
b) https://www.thenetninja.co.uk
c) https://laracasts.com
I noticed that by navigating around the websites we by clicking on navbar links and some other links then the pages refresh and I haven't been able to find out the reason online. Could someone kindly explain what's happening in that? Doesn't it go against the purpose of SPA?
For example the last site you specified: https://laracasts.com.
On its main page there is a white button "BROWSE COURSES". If you open Chrome DevTools panel(look at the picture with explanations), go to tab "Networks" (1) and then click on this white button, you can see GET request to "series?curated" (2). If you open its details, you can see that as response, new page is received in the form of an HTML code (3), not JSON for example, as is usually the case in SPA.
Also, if you look at what programming language is used on this site, for example, using service https://whatcms.org/?s=laracasts.com, you can see that this is a PHP, namely Laravel.
From all this, I can make the assumption that they use Vue.js only partially, maybe in several components, but the site navigation itself is presented in the form of traditional static pages, which is why the page reloads.
Also, for example, if you take a look at this website https://www.spendesk.com/, you can see that they use Vue.js+Nuxt.js, as well as Node.js, as indicated by service whatcms.org, and if you try to navigate to various pages on this site, you will see no page loading. I can say that this site is a true SPA in the form in which you mean it.
I heard that you can do a SPA with a Laravel backend, but I think that's another story.
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'm creating a SPA app using Durandal and I would like to include a credit card payment facility. The guys that I'm looking at requires you to give return URLs to success, cancel and a view other pages, is that possible?
To me it would be breaking the 'single page' part of SPA, but is it possible? Could I do it all in a window?
Disclaimer: I don't know Durandal, but you would solve this in an SPA using either "hashbang URIs" or actually re-serving the SPA in your webserver for the requested return URI and adjusting the content using the same technique as hangbash URIs but using history.pushstate/history.popstate instead, see here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
A more general article from Google is available here that covers the same principle: https://developers.google.com/webmasters/ajax-crawling/
This "works" because SPAs are SPAs only in that the browser requests a new HTML document from the server once (or in your case, twice), the SPA should still be updating the history and address-bar state of the UA as the user navigates the application, just as though it were a regular multi-page application.
A great example of this is GitHub's source navigator: Try here ( https://github.com/angular/angular.js ) and navigate the repository, observe that the contents of the file-listing change as does the address bar, but your browser doesn't reload the whole page... yet if you copy+paste the (modified) address bar address into a new browser window, you get the same page back.
I looked into doing credit card processing from a SPA and the best option I had found was Stripe. They supply a javascript file that looks like it would work, I never implemented it on my project due to time constraints so I can't confirm that it works but it looked very promising.
IFRAMEs are quite good for this sort of thing. You can use jQuery to hook an event handler to the page load event and this will tell you when the other end has responded. Load the 3rd party page into the IFRAME and serve response pages on the URLs you provide to the service provider. As mentioned by others you can use routes to identify the response pages. The IFRAME will stop the round-tripping from mucking up your application state and in fact it is possible to put script in your response pages that dot-notates its merry way up the DOM and into your app.
In WinJS is it possible to redirect a page once it has been activated by using the share charm?
So my target page is /pages/target/target.html. In the .js I want to do something like;
WinJS.Navigation.navigate("/pages/anotherpage/anotherpage.html");
It doesn't seem to raise an error but it's not navigating away from the target page.
I want to redirect pages based on user input.
This is similar to another question:
How to navigate between different html pages in Windows 8 Metro application using javascript?
However, if you actually are performing a page navigation (e.g. window.location changes), then you're going to have the challenge that the activation info with the share stuff will not be available; your script context is torn down on a page navigation, so you won't be able to hold onto it easily.