How to lazy load routes in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Lazy loading routes in Vue applications significantly improves initial load performance by loading route components only when they’re needed. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented lazy loading in numerous Vue admin dashboards and large-scale applications. From my 25 years of experience in web development and 11 years with Vue, the most effective approach is to use dynamic imports with arrow functions in route definitions. This pattern enables automatic code splitting and optimizes bundle size for better user experience.
Use dynamic imports with arrow functions in route component definitions to enable lazy loading.
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
component: () => import('./views/Home.vue')
},
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue')
},
{
path: '/users',
component: () => import('./views/Users.vue')
},
{
path: '/settings',
component: () => import('./views/Settings.vue')
},
// Grouping components for chunking
{
path: '/admin',
component: () => import(/* webpackChunkName: "admin" */ './views/Admin.vue')
},
{
path: '/reports',
component: () => import(/* webpackChunkName: "admin" */ './views/Reports.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
Dynamic imports with arrow functions create separate bundles for each component that are loaded only when the route is visited. The import() function returns a promise that resolves to the component module. Webpack automatically splits these components into separate chunks during the build process. Use the webpackChunkName comment to group related components into the same chunk, reducing the number of separate files while maintaining lazy loading benefits.
This is the same lazy loading strategy we use in CoreUI Vue admin templates to optimize large dashboard applications and improve perceived performance.
For loading states during route transitions, combine lazy loading with Vue’s built-in <Suspense> component or custom loading indicators to provide smooth user feedback.
