Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-29 17:07:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: document <ClientOnly> and <NuxtLink> (#1856)

Browse Source
This commit is contained in:
Anthony Fu 2021-11-15 20:00:14 +08:00 committed by GitHub
parent 8e12394e2d
commit 3e1239d8c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 82 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/content/3.docs/2.directory-structure/4.components.md
View File

@ -83,6 +83,40 @@ export default {
</script>
```
## `<ClientOnly>` Component
Nuxt provides the `<ClientOnly>` component for purposely rendering a component only on client-side. To import a component only on the client, register the component in a client-side only plugin.
```html{}[pages/example.vue]
<template>
<div>
<Sidebar />
<ClientOnly>
<!-- this component will only be rendered on client-side -->
<Comments />
</ClientOnly>
</div>
</template>
```
Use a slot as fallback until `<ClientOnly>` is mounted on client-side.
```html{}[pages/example.vue]
<template>
<div>
<Sidebar />
<ClientOnly>
<!-- this component will only be rendered on client-side -->
<Comments />
<template #fallback>
<!-- this will be rendered on server-side -->
<p>Loading comments...</p>
</template>
</ClientOnly>
</div>
</template>
```
## Library Authors
Making Vue component libraries with automatic tree-shaking and component registration is super easy ✨

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

@ -46,11 +46,41 @@ Navigating to `/users-admins/123` would render:
admins 123
```
## Navigation
To navigate between pages of your app, you should use the  `<NuxtLink>` component. This component is included with Nuxt and therefore you don't have to import it like you do with other components. It is similar to the HTML `<a>` tag except that instead of using a `href="/about"` you use `to="/about"`. If you've used `vue-router` before, you can think of `<NuxtLink>` as a replacement of `<RouterLink>`
A simple link to the `index.vue` page in your `pages` folder:
```html
<template>
<NuxtLink to="/">Home page</NuxtLink>
</template>
```
The `<NuxtLink>` component should be used for all internal links. That means for all links to the pages within your site you should use `<NuxtLink>`. The `<a>` tag should be used for all external links. That means if you have links to other websites you should use the `<a>` tag for those.
```html
<template>
<div>
<h1>Home page</h1>
<NuxtLink to="/about">
About (internal link that belongs to the Nuxt App)
</NuxtLink>
<a href="https://nuxtjs.org">External Link to another page</a>
</div>
</template>
```
::alert{type="info"}
If you want to know more about `<RouterLink>`, read the [Vue Router documentation](https://next.router.vuejs.org/api/#router-link) for more information.
::
## 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 `<NuxtChild>` component, for displaying the children components of a [nested route](https://next.router.vuejs.org/guide/essentials/nested-routes.html).
### Example
Example:
```bash
-| pages/
@ -59,36 +89,7 @@ We provide a semantic alias for `RouterView`, the `NuxtChild` component, for dis
---| 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:
This file tree will generate these routes:
```js
[
@ -106,3 +107,14 @@ The example file tree above should generate these routes:
}
]
```
To display the `child.vue` component, you have to insert the `<NuxtChild>` component inside `pages/parent.vue`:
```html{}[pages/parent.vue]
<template>
<div>
<h1>I am the parent view</h1>
<NuxtChild :foobar="123" />
</div>
</template>
```

8
docs/yarn.lock
View File

@ -10253,10 +10253,10 @@ std-env@^2.2.1, std-env@^2.3.0, std-env@^2.3.1:
dependencies:
ci-info "^3.1.1"
std-env@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.0.0.tgz#8dbd16bd2aadc18992072e2f5839e897f4ee2733"
integrity sha512-GoFEqAGzhaexp/T01rIiLOK9LHa6HmVwEUyeU4cwdSnOhfxpw9IMeAFi44SHWbCErEs29qEh7vAOUbtUmoycjA==
std-env@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.0.1.tgz#bc4cbc0e438610197e34c2d79c3df30b491f5182"
integrity sha512-mC1Ps9l77/97qeOZc+HrOL7TIaOboHqMZ24dGVQrlxFcpPpfCHpH+qfUT7Dz+6mlG8+JPA1KfBQo19iC/+Ngcw==
stream-browserify@^2.0.1:
version "2.0.2"