feat(nuxt3): support NuxtChild component (#1301) (nuxt#1312)

white1107 · Oct 21, 2021 · 694e95b · 694e95b
1 parent bbeb6b5
commit 694e95b
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 20 deletions.
diff --git a/docs/content/3.docs/2.directory-structure/9.pages.md b/docs/content/3.docs/2.directory-structure/9.pages.md
@@ -37,3 +37,64 @@ Given the example above, you can access group/id within your component via the `
   {{ $route.params.id }}
 </template>
 ```
+
+## Nested Routes
+
+We provide a semantic alias for `RouterView`, the `NuxtChild` component, for displaying the children components of a [nested route](https://next.router.vuejs.org/guide/essentials/nested-routes.html).
+
+### Example
+
+```bash
+-| pages/
+---| parent/
+------| child.vue
+---| parent.vue
+```
+
+To display the `child.vue` component, simply put the `<NuxtChild>` component inside the `parent.vue` component:
+
+```html{}[pages/parent/child.vue]
+<template>
+  <div>
+    <h3>child.vue</h3>
+  </div>
+</template>
+```
+
+```html{}[pages/parent.vue]
+<template>
+  <div>
+    <h1>parent.vue</h1>
+    <NuxtChild />
+  </div>
+</template>
+
+<!-- output -->
+<template>
+  <div>
+    <h1>parent.vue</h1>
+    <div>
+      <h3>child.vue</h3>
+    </div>
+  </div>
+</template>
+```
+
+The example file tree above should generate these routes:
+
+```ts
+[
+  {
+    path: '/parent',
+    component: '~/pages/parent.vue',
+    name: 'parent',
+    children: [
+      {
+        path: 'child',
+        component: '~/pages/parent/child.vue',
+        name: 'parent-child'
+      }
+    ]
+  }
+]
+```
diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -6501,10 +6501,10 @@ jiti@^1.10.1, jiti@^1.11.0, jiti@^1.12.5, jiti@^1.12.6, jiti@^1.9.1, jiti@^1.9.2
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.12.6.tgz#8884d53a10bd571e0e85787994d97cfcc48ac6f9"
   integrity sha512-drQ/qnYriF9KiU47sRF0rTvfQmJo4JEmFMhCk2SJIsUj+hGnQaxkwaKfyvK9KenX20JNTQmVfJOz7VWe0cSntw==
 
-jiti@^1.12.7:
-  version "1.12.7"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.12.7.tgz#745074d5a6f88c29152b32a99f4a2de23bd22a3f"
-  integrity sha512-2v5iYsJp5l7iX6ettW/hD7A9qZtsib3gMBfxbQxASszzOpZ0dFZBZAUQGKKIQ780XGR3sGEp1L/8t1JyyPq5Fg==
+jiti@^1.12.9:
+  version "1.12.9"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.12.9.tgz#2ce45b265cfc8dc91ebd70a5204807cf915291bc"
+  integrity sha512-TdcJywkQtcwLxogc4rSMAi479G2eDPzfW0fLySks7TPhgZZ4s/tM6stnzayIh3gS/db3zExWJyUx4cNWrwAmoQ==
 
 joycon@^3.0.1:
   version "3.0.1"
@@ -6578,7 +6578,7 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.1, json5@^2.1.2, json5@^2.2.0:
+json5@^2.1.1, json5@^2.1.2:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
   integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
@@ -7345,12 +7345,10 @@ mlly@^0.2.5:
   dependencies:
     import-meta-resolve "^1.1.1"
 
-mlly@^0.2.6:
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/mlly/-/mlly-0.2.6.tgz#6becb976c726ad9b4432662b7f8eb3e8d74b449c"
-  integrity sha512-Wzv+ONQTQLsEZ6/Hyp7yc+EpOv52DrPGN497S3ZN66OuYdJkwo9BoVTM+kefNfGRzTKu2qmW4vLp5CbX9HfoYQ==
-  dependencies:
-    import-meta-resolve "^1.1.1"
+mlly@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-0.3.0.tgz#5705b2a95551d79ad33feedc046daf7c6d079748"
+  integrity sha512-6XphOVPsnIzuqNYlcZPMJhaMDDdrEgbLUlA7BPis8O0kkLPbOVA8GcXGeICGcnDotCtTkxAEWBT+FlhywrXTmg==
 
 move-concurrently@^1.0.1:
   version "1.0.1"
@@ -8172,12 +8170,12 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
-pkg-types@^0.1.3:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-0.1.5.tgz#8e1740454561cebcb1037b728148f6d7b9442f28"
-  integrity sha512-EyZ8oKXlLv6YhW/6dbU25ei2MVr8yRd6NPh5CLH+vtTHUMKsKwYfpu02BszZYXGSn+LGc9dCVYWmc37vDWuJQQ==
+pkg-types@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-0.2.1.tgz#41a22a6689c1fb3df5434856cf158598342701b8"
+  integrity sha512-RlrGelHSS2yPeLT9NMuMIfpKS7+gRAhuXi+PexBeToKjbRkmu+E+HdgDY2ZKU1RDirk5w9WuViEhOufELtAnug==
   dependencies:
-    json5 "^2.2.0"
+    jsonc-parser "^3.0.0"
 
 plausible-tracker@^0.3.1:
   version "0.3.1"

diff --git a/examples/with-layouts/layouts/other.vue b/examples/with-layouts/layouts/other.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    Other
+    Other layout
     <slot />
   </div>
 </template>
diff --git a/examples/with-pages/pages/parent.vue b/examples/with-pages/pages/parent.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
     Parent
-    <RouterView />
+    <NuxtChild />
   </div>
 </template>
diff --git a/packages/nuxt3/src/pages/runtime/child.vue b/packages/nuxt3/src/pages/runtime/child.vue
@@ -0,0 +1,11 @@
+<template>
+  <RouterView v-slot="{ Component }">
+    <component :is="Component" :key="$route.path" />
+  </RouterView>
+</template>
+
+<script>
+export default {
+  name: 'NuxtChild'
+}
+</script>
diff --git a/packages/nuxt3/src/pages/runtime/layout.ts b/packages/nuxt3/src/pages/runtime/layout.ts
@@ -1,5 +1,5 @@
 import { defineComponent, h } from 'vue'
-
+// @ts-ignore
 import layouts from '#build/layouts'
 
 export default defineComponent({

diff --git a/packages/nuxt3/src/pages/runtime/router.ts b/packages/nuxt3/src/pages/runtime/router.ts
@@ -5,14 +5,15 @@ import {
   createMemoryHistory,
   RouterLink
 } from 'vue-router'
-// @ts-ignore
+import NuxtChild from './child.vue'
 import NuxtPage from './page.vue'
 import NuxtLayout from './layout'
 import { defineNuxtPlugin } from '#app'
 // @ts-ignore
 import routes from '#build/routes'
 
 export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('NuxtChild', NuxtChild)
   nuxtApp.vueApp.component('NuxtPage', NuxtPage)
   nuxtApp.vueApp.component('NuxtLayout', NuxtLayout)
   nuxtApp.vueApp.component('NuxtLink', RouterLink)