diff --git a/examples/with-pages/app.vue b/examples/with-pages/app.vue
index 368d5dfdee..6520666fb2 100644
--- a/examples/with-pages/app.vue
+++ b/examples/with-pages/app.vue
@@ -6,6 +6,12 @@
     <NuxtLink to="/about">
       About
     </NuxtLink>
+    <NuxtLink to="/parent">
+      Parent (index)
+    </NuxtLink>
+    <NuxtLink to="/parent/b">
+      Parent (b)
+    </NuxtLink>
 
     <NuxtPage />
   </div>
diff --git a/examples/with-pages/pages/parent.vue b/examples/with-pages/pages/parent.vue
new file mode 100644
index 0000000000..e811a4531f
--- /dev/null
+++ b/examples/with-pages/pages/parent.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    Parent
+    <RouterView />
+  </div>
+</template>
diff --git a/examples/with-pages/pages/parent/b.vue b/examples/with-pages/pages/parent/b.vue
new file mode 100644
index 0000000000..6312e81612
--- /dev/null
+++ b/examples/with-pages/pages/parent/b.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Parent/b
+  </div>
+</template>
diff --git a/examples/with-pages/pages/parent/index.vue b/examples/with-pages/pages/parent/index.vue
new file mode 100644
index 0000000000..fe020db9bc
--- /dev/null
+++ b/examples/with-pages/pages/parent/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Parent/index
+  </div>
+</template>
diff --git a/packages/nuxt3/src/pages/module.ts b/packages/nuxt3/src/pages/module.ts
index aaee7a5b9b..34c6ab83c8 100644
--- a/packages/nuxt3/src/pages/module.ts
+++ b/packages/nuxt3/src/pages/module.ts
@@ -2,7 +2,7 @@ import { existsSync } from 'fs'
 import { defineNuxtModule, addTemplate, addPlugin } from '@nuxt/kit'
 import { resolve } from 'pathe'
 import { distDir } from '../dirs'
-import { resolveLayouts, resolvePagesRoutes } from './utils'
+import { resolveLayouts, resolvePagesRoutes, addComponentToRoutes } from './utils'
 
 export default defineNuxtModule({
   name: 'router',
@@ -40,7 +40,7 @@ export default defineNuxtModule({
       filename: 'routes.mjs',
       async getContents () {
         const routes = await resolvePagesRoutes(nuxt)
-        const serializedRoutes = routes.map(route => ({ ...route, component: `{() => import('${route.file}')}` }))
+        const serializedRoutes = addComponentToRoutes(routes)
         return `export default ${JSON.stringify(serializedRoutes, null, 2).replace(/"{(.+)}"/g, '$1')}`
       }
     })
diff --git a/packages/nuxt3/src/pages/utils.ts b/packages/nuxt3/src/pages/utils.ts
index 0a5442644b..ddd8e5d474 100644
--- a/packages/nuxt3/src/pages/utils.ts
+++ b/packages/nuxt3/src/pages/utils.ts
@@ -230,3 +230,11 @@ export async function resolveLayouts (nuxt: Nuxt) {
     return { name, file }
   })
 }
+
+export function addComponentToRoutes (routes: NuxtRoute[]) {
+  return routes.map(route => ({
+    ...route,
+    children: addComponentToRoutes(route.children),
+    component: `{() => import('${route.file}')}`
+  }))
+}