How to Create Async Components in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Async components in Vue.js allow you to load components on-demand, reducing initial bundle size and improving application performance. As the creator of CoreUI with over 11 years of Vue.js development experience, I use async components extensively for code splitting and lazy loading in large applications. Async components are particularly useful for routes, modals, and heavy components that aren’t needed immediately.
Create async components using dynamic imports or the defineAsyncComponent function to enable lazy loading and code splitting.
import { defineAsyncComponent } from 'vue'
// Simple async component with dynamic import
const AsyncUserProfile = defineAsyncComponent(() =>
import('./components/UserProfile.vue')
)
// Async component with loading and error states
const AsyncDataTable = defineAsyncComponent({
loader: () => import('./components/DataTable.vue'),
loadingComponent: () => import('./components/LoadingSpinner.vue'),
errorComponent: () => import('./components/ErrorMessage.vue'),
delay: 200,
timeout: 3000
})
// Usage in component
export default {
components: {
AsyncUserProfile,
AsyncDataTable
},
template: `
<div>
<h1>Dashboard</h1>
<AsyncUserProfile :user-id="currentUserId" />
<AsyncDataTable :data="tableData" />
</div>
`,
data() {
return {
currentUserId: 123,
tableData: []
}
}
}
// In router for route-level code splitting
const routes = [
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue')
},
{
path: '/settings',
component: () => import('./views/Settings.vue')
}
]
Use defineAsyncComponent() to create async components with advanced options like loading states, error handling, and timeouts. The loader function should return a Promise that resolves to the component. You can specify a loading component to show while the async component loads, and an error component for failed loads. The delay option prevents loading flicker for fast connections, while timeout provides fallback error handling.
Best Practice Note:
In CoreUI applications, we strategically use async components for admin panels, charts, and complex form components that aren’t needed on initial page load. This approach significantly reduces bundle size and improves perceived performance, especially important for enterprise applications with many features and components.
