Sometimes you need to load components while the app is already running. This can be because you have so many components that it will be too cumbersome to load all of them or maybe the shape of some component is not known in advance. With Vue, you can load components only when they have to actually render. Next time the component will need to be rendered, it will be retrieved from cache.
You want to load your component asynchronously only when you already know how to make AJAX requests with Vue. In this recipe, though, we will skip those, so you can follow along right away.
Let's suppose that we have a big vase e-commerce. We have one component for every vase, but we can't give them all to the user at once. It will be too much data. We will load the component from the Internet.
As only modification, we will simulate the AJAX call with a simple setTimeout
. Let's go back to our favorite online editor, JSFiddle:
Vue.component('XuandePeriodVase...