I have a full static NUXT application, so i would expect all content on pages to be ready immediately after route change.
I'm experiencing that there is a slight delay between the route change and each component appearing on the page, resulting in layout shifts.
Is this expected behaviour?
I've made a minimal reproduction which produces the same behaviour. (Sometimes ;) )
https://github.com/Jonatan-bs/static-nuxt-test
It's a create-nuxt-app with a page that renders a lot of components dynamically.
to reproduce:
npm run install
npm run generate
npm run start
click on 'test' link, which links to another page
Expected behaviour:
All components would be present immediately after the page change, since it's a static generated app.
Observed behaviour:
As shown on the attached picture
after route change the component with yellow background is rendered.
then shortly after, the component with black background is rendered
The amount of memory taken (several MB) + several thousands of nodes at the same time are not crashing your page, you should already be happy that this test passes. This is because Vue is pretty lightweight. You can't ask the browser to smoothly switch from one page to the other, especially in an SPA context where stuff needs to be removed + added back.
More details in my previous comment are available here: Nuxt SSG: Page doesn't have all content immediately after route change
Related
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
I'm working on a project and using AOS animation but all div blocks that have an animation on them disappear whenever I refresh the page. I want to trigger a function whenever the page is refreshed so I can use the AOS.refresh(). Is there any way to do this in nuxt.js or maybe a way to go around this AOS bug?
UPDATE:
here's an example this is how the page looks before reloading:
then after reloading:
As you can see. the elements that still appear after the reloading are the ones without AOS animation.
Additionally, if you focus your eyes on the sidebar, notice I have a home page. this problem happens literally everywhere except the home page. When I go to the home page then I go back to other pages the problem basically disappears.
Not sure where is your bug coming from but so far, the homepage of the library achieves to have an animation on a page refresh. Maybe it is a lifecycle code issue at some point. Maybe post some for us to help you debug this one.
To my knowledge, there is no way of watching if your webpage is actually refreshed because there is nothing related to state before this. The only somehow useful thing that may be used sometime is this.$router.history._startLocation, which will give you the first path your webapp was loaded on.
Not sure if it may help you anyhow.
Also, you can maybe give a shot to this library in VueJS and wire it to Nuxt. Should behave pretty much the same.
So I've got a Vue Router running in history mode. It works perfectly when clicking <router-links>, but I can't get address bar navigations to 'stick'. The address always reverts back to the previous URL, despite loading the correct page content.
You can replicate this yourself by running vue create projectName and choosing Manually select features -> Router -> Vue 3.x -> Use history mode (Y). This creates the example project below.
If you navigate to http://localhost:8080/about, the About view loads. Correct.
Now if you type http://localhost:8080/, the Home view loads, but the URL reverts to /about!
And if you type http://localhost:8080/about again, the exact opposite happens.
Am I doing something wrong, or is this a bug in Vue Router 4?
Turns out this is a bug exclusively in Vivaldi. Popular browsers show the expected behaviour with Vue Router, even other Chromium browsers.
I really should've checked that to begin with. Hope this helps someone else, though!
i have a strange behavior where i load my home page that is quite heavy in terms of images/data to load then i click on a link while its loading, it load the next component in the view (through router-link) but the previous data seem to be still loading in the background + if i push the browser back button, the url change but the previous view don't load untill previous data finished to load then it load.
My code is quite complexe now so i'm not sure which part to share here but is it something common like im missing a destroy() method or so ?
Happens only on first load, after once data are cached it work all fine.
The Cypress for some reason produces a duplicate of an element, which makes it hard to make certain assertions.
We're working in the WordPress environment with our plugin and the flow of the test is:
Creating a page with our plugin
Adding an element (Post Grid in this case)
Changing some attributes
Saving the page
Viewing the page
E.g. A post grid is a usual div element which contains two items (links to blog posts) in it, but due to its being duplicate, the following assertion fails.
cy.get('.vce-posts-grid-list')
.find('.vce-posts-grid-item')
.its('length')
.should('be.eq', 2)
Our plugin utilizes an iframe and generates content (HTML) inside it.
Note: This issue occurs only sometimes, NOT 100% of the time.
Is it a Cypress specific issue or a reaction for WordPress and possibly our plugin environment?