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.
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.
I am using vuejs with laravel blade file (laravel mix too). But When i run ‘npm run watch’ on local, it built about 13 MB of app.js !
When i run ‘npm run pord’ on server it makes 6 mb !
So, the users face slowness every time i deploy new task.
I have few role permission (main panel and school panel).
Main panel has full control over all things. But school panel has few component.
We use blade file which call a master component and master component may have one or more components that are SPA(Tab based). Means when user click other tab it loads another component but if the user click on sidebar menu the page (laravel blade file) reloads and load another page with tabs.
I don’t need to load all component for school panel as this panel has limited permission.
Is there any way so that i can load component specific js file instead of one js(app.js) file?
Is there any way to compact all packages in single file and component file in another js file?(as whenever i deploy changes user have to download whole js file again)
You start with changing your build, so it creates two bundles:
app.d1f04bb8.js (your code)
vendor.b9f38bcd.js (libraries)
both are cached, so when you do small change -- user will need to load only new app.js.
You can go further and make more vendor bundles, more app bundles, lazy-load bundles etc. -- which one you need is very specific.
P.S. Of course, make sure that your code is minified.
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 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