Lazy Loading Components

Learn about lazy loading components and how to manage these in our application using the defineAsyncComponent function.

We'll cover the following

Async components
The defineAsyncComponent function

Not every component is equal. Some are more important and should be displayed immediately, while content further down the page won’t be visible right away anyway, so it can be loaded a bit later. Similarly, content that’s shown in modals and popups, especially if there’s a lot of it, doesn’t need to be loaded upfront.

Async components

There’s a slight difference between how async components are defined in Vue 2 and Vue 3. In Vue 2, async components can be used by providing a function that returns an object like this:

Get hands-on with 1200+ tech skills courses.

Before We Begin

Migrating from Vue 2 to Vue 3

Project Configuration and Useful Extensions

Scalable Project Architecture

Project and Component Documentation

API Layer and Managing Async Operations

Advanced Component Patterns

Managing Application State

Managing Application Layouts

Performance Optimization

Vuex Patterns and Best Practices

Application Security

Best Practices for Testing Vue Applications

Useful Patterns, Tips and Tricks

Conclusion

Appendix

Lazy Loading Components

Async components