components/clientonly

16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

ClientOnly component overview

The <ClientOnly> component is used for purposely rendering a component only on client side. The content of the default slot will be tree-shaken out of the server build, which means that any CSS used by components within it may not be inlined when rendering the initial HTML.

ClientOnly props

The <ClientOnly> component accepts the following props: placeholderTag (alias: fallbackTag) to specify a tag to be rendered server-side, and placeholder (alias: fallback) to specify content to be rendered server-side.

ClientOnly slots

The <ClientOnly> component provides a #fallback slot to specify content to be rendered on the server and displayed until <ClientOnly> is mounted in the browser.

ClientOnly example with fallback tag and text

The <ClientOnly> component can be used with fallback-tag="span" and fallback="Loading comments..." props to render a span element on the server side with loading text before the client-side component mounts. Example: <ClientOnly fallback-tag="span" fallback="Loading comments..."><Comment /></ClientOnly>

ClientOnly example with fallback slot

The <ClientOnly> component can use a named #fallback slot instead of props. Content in the fallback slot renders on the server side and displays until the client-side component mounts. Example: <ClientOnly fallback-tag="span"><Comments /><template #fallback><p>Loading comments...</p></template></ClientOnly>

ClientOnly accessing mounted DOM elements with useTemplateRef

Components inside <ClientOnly> are rendered only after being mounted. To access the rendered elements in the DOM, use watch() with a template ref created by useTemplateRef(). The watch callback will be triggered when the component is available. Example: const nuxtWelcomeRef = useTemplateRef('nuxtWelcomeRef'); watch(nuxtWelcomeRef, () => { console.log('<NuxtWelcome /> mounted') }, { once: true }); <ClientOnly><NuxtWelcome ref="nuxtWelcomeRef" /></ClientOnly>

NuxtClientFallback component purpose

NuxtClientFallback is a component that renders its content on the client if any of its children trigger an error during server-side rendering (SSR).

NuxtClientFallback experimental feature requirement

To use the NuxtClientFallback component, you must enable the experimental.clientFallback option in nuxt.config.

NuxtClientFallback @ssr-error event

The @ssr-error event is emitted when a child component triggers an error during SSR. This event is only triggered on the server.

NuxtClientFallback props

NuxtClientFallback accepts the following props: - placeholderTag or fallbackTag: Specify a fallback HTML tag to be rendered if the slot fails to render on the server. Type: string. Default: 'div'. - placeholder or fallback: Specify fallback content to be rendered if the slot fails to render. Type: string. Default: undefined. - keepFallback: Keep the fallback content if it failed to render server-side. Type: boolean. Default: false.

NuxtClientFallback fallback and placeholder props XSS warning

The placeholder and fallback props render content as raw HTML. Do not pass untrusted user input to these props as it may lead to XSS vulnerabilities. Use the #fallback or #placeholder slots instead for dynamic content that needs proper escaping.

NuxtClientFallback #fallback slot

The #fallback slot specifies content to be displayed server-side if the default slot fails to render. This is the recommended way to provide fallback content for dynamic or untrusted data.

NuxtClientFallback usage example

Example showing NuxtClientFallback wrapping components that may fail in SSR: ```vue <template> <div> <Sidebar />  <NuxtClientFallback fallback-tag="span"> <Comments /> <BrokeInSSR /> </NuxtClientFallback> </div> </template> ```

NuxtClientFallback @ssr-error event handler example

Example showing how to handle SSR errors with the @ssr-error event: ```vue <template> <NuxtClientFallback @ssr-error="logSomeError">  </NuxtClientFallback> </template> ```

NuxtClientFallback fallback props example

Example showing NuxtClientFallback with fallback-tag and fallback props: ```vue <template>  <NuxtClientFallback fallback-tag="span" fallback="Hello world" > <BrokeInSSR /> </NuxtClientFallback> </template> ```

NuxtClientFallback #fallback slot example

Example showing how to use the #fallback slot: ```vue <template> <NuxtClientFallback>  <template #fallback>  <p>Hello world</p> </template> </NuxtClientFallback> </template> ```

Give your agent this brain