Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-14 01:53:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(nuxt3): rename <NuxtChild> to <NuxtNestedPage> (#2432)

Browse Source
This commit is contained in:
Daniel Roe 2021-12-20 10:37:58 +00:00 committed by GitHub
parent f668d7457f
commit 639e49be27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/content/3.docs/2.directory-structure/9.pages.md
View File

@ -93,7 +93,7 @@ If you want to know more about `<RouterLink>`, read the [Vue Router documentati
## Nested Routes ## 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). We provide a semantic alias for `RouterView`, the `<NuxtNestedPage>` component, for displaying the children components of a [nested route](https://next.router.vuejs.org/guide/essentials/nested-routes.html).
Example: Example:
@ -123,13 +123,13 @@ This file tree will generate these routes:
] ]
``` ```
To display the `child.vue` component, you have to insert the `<NuxtChild>` component inside `pages/parent.vue`: To display the `child.vue` component, you have to insert the `<NuxtNestedPage>` component inside `pages/parent.vue`:
```html{}[pages/parent.vue] ```html{}[pages/parent.vue]
<template> <template>
<div> <div>
<h1>I am the parent view</h1> <h1>I am the parent view</h1>
<NuxtChild :foobar="123" /> <NuxtNestedPage :foobar="123" />
</div> </div>
</template> </template>
``` ```

2
examples/with-pages/pages/parent.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
Parent Parent
<NuxtChild /> <NuxtNestedPage />
</div> </div>
</template> </template>

2
packages/nuxt3/src/pages/runtime/child.vue → packages/nuxt3/src/pages/runtime/nested-page.vue
View File

@ -6,6 +6,6 @@
<script> <script>
export default { export default {
name: 'NuxtChild' name: 'NuxtNestedPage'
} }
</script> </script>

8
packages/nuxt3/src/pages/runtime/router.ts
View File

@ -5,7 +5,7 @@ import {
createMemoryHistory, createMemoryHistory,
RouterLink RouterLink
} from 'vue-router' } from 'vue-router'
import NuxtChild from './child.vue' import NuxtNestedPage from './nested-page.vue'
import NuxtPage from './page.vue' import NuxtPage from './page.vue'
import NuxtLayout from './layout' import NuxtLayout from './layout'
import { defineNuxtPlugin } from '#app' import { defineNuxtPlugin } from '#app'
@ -14,7 +14,7 @@ import routes from '#build/routes'
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
NuxtChild: typeof NuxtChild NuxtNestedPage: typeof NuxtNestedPage
NuxtPage: typeof NuxtPage NuxtPage: typeof NuxtPage
NuxtLayout: typeof NuxtLayout NuxtLayout: typeof NuxtLayout
NuxtLink: typeof RouterLink NuxtLink: typeof RouterLink
@ -22,10 +22,12 @@ declare module 'vue' {
} }
export default defineNuxtPlugin((nuxtApp) => { export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('NuxtChild', NuxtChild) nuxtApp.vueApp.component('NuxtNestedPage', NuxtNestedPage)
nuxtApp.vueApp.component('NuxtPage', NuxtPage) nuxtApp.vueApp.component('NuxtPage', NuxtPage)
nuxtApp.vueApp.component('NuxtLayout', NuxtLayout) nuxtApp.vueApp.component('NuxtLayout', NuxtLayout)
nuxtApp.vueApp.component('NuxtLink', RouterLink) nuxtApp.vueApp.component('NuxtLink', RouterLink)
// TODO: remove before release - present for backwards compatibility & intentionally undocumented
nuxtApp.vueApp.component('NuxtChild', NuxtNestedPage)
const routerHistory = process.client const routerHistory = process.client
? createWebHistory() ? createWebHistory()