Lazy-load routes and keep navigation fast

Approach

Use dynamic imports for route components so each page is a separate chunk, group related pages, and prefetch likely next pages when the browser is idle. Restore scroll positions with scrollBehavior.

Solution

// router.ts
import { createRouter, createWebHistory } from "vue-router";

const AccountLayout = () => import("./layouts/AccountLayout.vue");

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: () => import("./pages/Home.vue") },
    {
      path: "/account",
      component: AccountLayout,
      children: [
        { path: "", component: () => import("./pages/account/Overview.vue") },
        { path: "orders", component: () => import("./pages/account/Orders.vue") },
      ],
    },
    { path: "/:pathMatch(.*)*", component: () => import("./pages/NotFound.vue") },
  ],
  scrollBehavior(to, _from, saved) {
    if (saved) return saved;                              // back/forward keeps position
    if (to.hash) return { el: to.hash, behavior: "smooth" };
    return { top: 0 };
  },
});

// Prefetch the account area once the app is idle.
if ("requestIdleCallback" in window) {
  requestIdleCallback(() => void AccountLayout());
}

Pitfalls

• A catch-all route without a real 404 page or status (handle 404s on the server for SSR apps).
• Lazy-loading tiny components, creating many small requests.
• Not handling chunk load failures after deploys; reload the page when a dynamic import fails.

Variations

• router.onError can detect failed chunk loads and trigger location.reload().
• Nuxt prefetches page chunks for visible <NuxtLink>s automatically.

Further reading: Lazy loading routes