fix(nuxt3): child routes in vue-router don't have component field (#998)

Co-authored-by: pooya parsa <pyapar@gmail.com>

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>

examples/with-pages/pages/parent.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    Parent
+    <RouterView />
+  </div>
+</template>

examples/with-pages/pages/parent/b.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Parent/b
+  </div>
+</template>

examples/with-pages/pages/parent/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Parent/index
+  </div>
+</template>

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')}`
       }
     })

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}')}`
+  }))
+}