Handle Errors and Loading with Vue Async Components
Because async components are not bundled with your app, they need to be loaded when requested. This means that your network could be slow, go down, or the file could be completely missing. This lesson shows you how to handle these scenarios with Vue loading components and Error components.
Instructor: [00:00] Async components also support a loading component, so if this component is still loading, or let's say render h that h1 that says loading and toss in may be a little emoji in there. To demonstrate this, we're going to grab a 13 megabyte JSON file, put it my components folder, so that just has 100,000 rows of generated data. Then in my component, I'm just going to embed that.
[00:28] Import data from data.json, and let the json-loader bundle that in here for us. Now, I'm going to do my regular build instead of a div build which will run build, which is poi build, and use the serve library just to serve the disk folder.
[00:45] Go ahead and run npm-run start which will fire that off, and you'll see one of my files is chunk here has been compressed and labeled as big, because of that JSON files, so it's going to try and load that in.
[00:57] My server is on port 5,000 which is over here. I'll load two, then I'll clear out the networks, so you can see it happen, and I'll try loading this. It will take a bit, show loading, and finally load in. You can see that, this loading component which is just an object with a render method on it handled that state before this was completely elaborate.
[01:20] For loading fails, we'll add a time out of three seconds. You can add in an error component, so I'll say render and then an error component for the say, error and may be use someone whose crying that.
[01:34] I don't need to include this data to show an error, but I do need to run the build again, so I'll stop the server and start it up again. Run the main build and start the server. You can see that component is much, much smaller this time.
[01:48] I'll refresh here, one, two, and before I go to load that, I come in here actually delete the file, the JavaScript file. Say move to trash, and then try and load three, and you can see its hit this error state. The network you can see, you try to grab that and could not find it.
[02:09] Async components can handle loading with loading components and errors with error components. Make sure your app doesn't fail, in case something goes wrong with your component you're trying to load.
Just two cents but to show loading instead of creating huge files, you could use throttling in Chrome DevTools and put slow 3G for example
But what about using this with async routing?