Simplify Vue Components with vue-class-component

Define Props on a Vue Class with vue-property-decorator

Place Content in Components with Vue Slots

Create Layouts with Named Vue Slots

Pass Props Between Components with Vue Slot Scope

Pass Props to Vue Functional Templates

Control Template Contents with Vue's Render Function

Avoid Semantic HTML Names for Vue Components

Write Vue Functional Components Inline

Pass Vue Render Functions as Props for Powerful Patterns

Switch Between Vue Components with Dynamic Components

Load Vue Async Components

Handle Errors and Loading with Vue Async Components

Advanced Fine-Grained Control of Vue.js Components

Vue provides a straight-forward syntax for loading components at runtime to help shave off initial bundle size. You simply define a function that returns an object with a `component` property pointing to a promise that loads a component, then Vue takes care of the rest for you.

https://app.egghead.io/api/v1/lessons/vue-js-load-vue-async-components/subtitles

Instructor: [00:00] I can take out this three component, create a file called three.js, export this three component, it is like that. Back in my app, I can dynamically load the three component are called as async three.

[00:21] This will be a function which returns an object where the component is an import statement pointing to the component. I'll say components/three. On my list of components, I can do one, two, and async three. I'll open up the network tab, make it quite a bit bigger, and you'll see I'll switch to two, nothing loads.

[00:48] I'll switch to three and you'll see I get three.chunk, and their responses is three component with that code in component code in there, which was loaded dynamically.

Load Vue Async Components

Share this video with your friends

Course

Advanced Fine-Grained Control of Vue.js Components