Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ac54031

Browse files
trdlntrdln
authored
docs: mention <DevOnly> component in api section (#26029)
1 parent 70b2986 commit ac54031

File tree

4 files changed

+86
-86
lines changed

4 files changed

+86
-86
lines changed

‎docs/2.guide/2.directory-structure/1.components.md‎

Lines changed: 7 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,10 @@ This feature only works with Nuxt auto-imports and `#components` imports. Explic
244244
`.client` components are rendered only after being mounted. To access the rendered template using `onMounted()`, add `await nextTick()` in the callback of the `onMounted()` hook.
245245
::
246246

247+
::read-more{to="/docs/api/components/client-only"}
248+
You can also achieve a similar result with the `<ClientOnly>` component.
249+
::
250+
247251
## Server Components
248252

249253
Server components allow server-rendering individual components within your client-side apps. It's possible to use server components within Nuxt, even if you are generating a static site. That makes it possible to build complex sites that mix dynamic components, server-rendered HTML and even static chunks of markup.
@@ -357,89 +361,12 @@ In this case, the `.server` + `.client` components are two 'halves' of a compone
357361
</template>
358362
```
359363

360-
## `<ClientOnly>` Component
361-
362-
Nuxt provides the [`<ClientOnly>`](/docs/api/components/client-only) component for purposely rendering a component only on client side.
363-
364-
```vue [pages/example.vue]
365-
<template>
366-
<div>
367-
<Sidebar />
368-
<ClientOnly>
369-
<!-- this component will only be rendered on client-side -->
370-
<Comments />
371-
</ClientOnly>
372-
</div>
373-
</template>
374-
```
364+
## Built-In Nuxt Components
375365

376-
Use a slot as fallback until `<ClientOnly>` is mounted on client side.
366+
There are a number of components that Nuxt provides, including `<ClientOnly>` and `<DevOnly>`. You can read more about them in the API documentation.
377367

378-
```vue [pages/example.vue]
379-
<template>
380-
<div>
381-
<Sidebar />
382-
<!-- This renders the "span" element on the server side -->
383-
<ClientOnly fallbackTag="span">
384-
<!-- this component will only be rendered on client side -->
385-
<Comments />
386-
<template #fallback>
387-
<!-- this will be rendered on server side -->
388-
<p>Loading comments...</p>
389-
</template>
390-
</ClientOnly>
391-
</div>
392-
</template>
393-
```
394-
395-
<!-- TODO: Add back after passing treeshakeClientOnly experiment -->
396-
<!--
397-
::note
398-
Make sure not to _nest_ `<ClientOnly>` components or other client-only components. Nuxt performs an optimization to remove the contents of these components from the server-side render, which can break in this case.
368+
::read-more{to="/docs/api"}
399369
::
400-
-->
401-
402-
## `<DevOnly>` Component
403-
404-
Nuxt provides the `<DevOnly>` component to render a component only during development.
405-
406-
The content will not be included in production builds and tree-shaken.
407-
408-
```vue [pages/example.vue]
409-
<template>
410-
<div>
411-
<Sidebar />
412-
<DevOnly>
413-
<!-- this component will only be rendered during development -->
414-
<LazyDebugBar />
415-
416-
<!-- if you ever require to have a replacement during production -->
417-
<!-- be sure to test these using `nuxt preview` -->
418-
<template #fallback>
419-
<div><!-- empty div for flex.justify-between --></div>
420-
</template>
421-
</DevOnly>
422-
</div>
423-
</template>
424-
```
425-
426-
## `<NuxtClientFallback>` Component
427-
428-
Nuxt provides the `<NuxtClientFallback>` component to render its content on the client if any of its children trigger an error in SSR.
429-
You can specify a `fallbackTag` to make it render a specific tag if it fails to render on the server.
430-
431-
```vue [pages/example.vue]
432-
<template>
433-
<div>
434-
<Sidebar />
435-
<!-- this component will be rendered on client-side -->
436-
<NuxtClientFallback fallback-tag="span">
437-
<Comments />
438-
<BrokeInSSR />
439-
</NuxtClientFallback>
440-
</div>
441-
</template>
442-
```
443370

444371
## Library Authors
445372

‎docs/3.api/1.components/1.client-only.md‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ links:
88
size: xs
99
---
1010

11-
The `<ClientOnly>` component renders its slot only in client-side. To import a component only on the client, register the component in a client-side only plugin.
11+
The `<ClientOnly>` component is used for purposely rendering a component only on client side.
12+
13+
::note
14+
The content of the default slot will be tree-shaken out of the server build. (This does mean that any CSS used by components within it may not be inlined when rendering the initial HTML.)
15+
::
1216

1317
## Props
1418

@@ -19,6 +23,7 @@ The `<ClientOnly>` component renders its slot only in client-side. To import a c
1923
<template>
2024
<div>
2125
<Sidebar />
26+
<!-- The <Comment> component will only be rendered on client-side -->
2227
<ClientOnly fallback-tag="span" fallback="Loading comments...">
2328
<Comment />
2429
</ClientOnly>
@@ -28,14 +33,16 @@ The `<ClientOnly>` component renders its slot only in client-side. To import a c
2833

2934
## Slots
3035

31-
- `#fallback`: specify a content to be displayed server-side.
36+
- `#fallback`: specify a content to be rendered on the server and displayed until `<ClientOnly>` is mounted in the browser.
3237

33-
```vue
38+
```vue [pages/example.vue]
3439
<template>
3540
<div>
3641
<Sidebar />
37-
<ClientOnly>
38-
<!-- ... -->
42+
<!-- This renders the "span" element on the server side -->
43+
<ClientOnly fallbackTag="span">
44+
<!-- this component will only be rendered on client side -->
45+
<Comments />
3946
<template #fallback>
4047
<!-- this will be rendered on server side -->
4148
<p>Loading comments...</p>

‎docs/3.api/1.components/1.dev-only.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
title: '<DevOnly>'
3+
description: Render components only during development with the <DevOnly> component.
4+
links:
5+
- label: Source
6+
icon: i-simple-icons-github
7+
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/dev-only.ts
8+
size: xs
9+
---
10+
11+
Nuxt provides the `<DevOnly>` component to render a component only during development.
12+
13+
The content will not be included in production builds.
14+
15+
```vue [pages/example.vue]
16+
<template>
17+
<div>
18+
<Sidebar />
19+
<DevOnly>
20+
<!-- this component will only be rendered during development -->
21+
<LazyDebugBar />
22+
23+
<!-- if you ever require to have a replacement during production -->
24+
<!-- be sure to test these using `nuxt preview` -->
25+
<template #fallback>
26+
<div><!-- empty div for flex.justify-between --></div>
27+
</template>
28+
</DevOnly>
29+
</div>
30+
</template>
31+
```
32+
33+
## Slots
34+
35+
- `#fallback`: if you ever require to have a replacement during production.
36+
37+
```vue
38+
<template>
39+
<div>
40+
<Sidebar />
41+
<DevOnly>
42+
<!-- this component will only be rendered during development -->
43+
<LazyDebugBar />
44+
<!-- be sure to test these using `nuxt preview` -->
45+
<template #fallback>
46+
<div><!-- empty div for flex.justify-between --></div>
47+
</template>
48+
</DevOnly>
49+
</div>
50+
</template>
51+
```

‎docs/3.api/1.components/1.nuxt-client-fallback.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,25 @@ links:
1212
size: xs
1313
---
1414

15+
Nuxt provides the `<NuxtClientFallback>` component to render its content on the client if any of its children trigger an error in SSR.
16+
1517
::note{to="/docs/guide/going-further/experimental-features#clientfallback"}
1618
This component is experimental and in order to use it you must enable the `experimental.clientFallback` option in your `nuxt.config`.
1719
::
1820

21+
```vue [pages/example.vue]
22+
<template>
23+
<div>
24+
<Sidebar />
25+
<!-- this component will be rendered on client-side -->
26+
<NuxtClientFallback fallback-tag="span">
27+
<Comments />
28+
<BrokeInSSR />
29+
</NuxtClientFallback>
30+
</div>
31+
</template>
32+
```
33+
1934
## Events
2035

2136
- `@ssr-error`: Event emitted when a child triggers an error in SSR. Note that this will only be triggered on the server.
@@ -30,7 +45,7 @@ This component is experimental and in order to use it you must enable the `exper
3045

3146
## Props
3247

33-
- `placeholderTag` | `fallbackTag`: Specify a fallback tag to be rendered if the slot fails to render.
48+
- `placeholderTag` | `fallbackTag`: Specify a fallback tag to be rendered if the slot fails to render on the server.
3449
- **type**: `string`
3550
- **default**: `div`
3651
- `placeholder` | `fallback`: Specify fallback content to be rendered if the slot fails to render.

0 commit comments

Comments
 (0)