midVue.js
What are Async Components in Vue?
Updated May 4, 2026
Short answer
They are components loaded from the server only when needed, used for code splitting.
Deep explanation
Using defineAsyncComponent, Vue will only request the component's JavaScript bundle when it is actually rendered on the page. This significantly reduces the initial bundle size and improves load times.
Real-world example
Lazy loading a 'Settings' modal or a 'Report Generator' that most users never click on.
Common mistakes
- Overusing them for very small components, which adds unnecessary network overhead.
Follow-up questions
- Can you show a loading state with async components?