Vue 48: Lazy-Loading Routes
easy⏱ 5 mincoursevue
component: () => import(...)
In a real, bundled app, a route’s component doesn’t have to be imported up front — component: () => import('./views/About.vue') hands the router a function that returns a dynamic import promise. The bundler (Vite/webpack) splits that view into its own chunk, fetched only when the route is first visited.
const routes = [
{ path: '/', component: Home },
{
path: '/about',
component: () => import('./views/About.vue'),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
defineAsyncComponent as the live stand-in
This single-file sandbox can’t truly code-split, but defineAsyncComponent({ loader, loadingComponent }) captures the exact same mental model live: the loader function returns a promise (here, a setTimeout-delayed one standing in for a network chunk), and Vue renders loadingComponent until it resolves — precisely what a bundler-driven lazy route feels like to a user on a slow connection.
Same idea, two different loaders
Swap the setTimeout-wrapped promise for a real () => import('./views/About.vue') in a bundled app and the behavior — a route that loads its component on demand, showing a loading state in between — is identical.
Try it
Click "About (lazy)" and watch the ⏳ loading card render for 1.5s before the real About view replaces it — that gap is exactly what a slow chunk download feels like in production.