Client-only page

[kingyue737]

Describe the feature

Importing a library that is not compatible with SSR in a page may result in an error like window is undefined.

<!-- /pages/page1.vue -->
<script setup>
import L from 'L' // L is a library that does not support SSR
</script>

<template>
<div id='L'>
  <!-- ... -->
</div> 
</template>

We need to manually extract it to a separate component to the components folder and import it in the page, even though this component may only be used once.

<!-- /components/PageComponent.vue -->
<script setup>
import L from 'L' // L is a library that does not support SSR
</script>

<template>
<div id='L'>
  <!-- ... -->
</div> 
</template>

<!-- /pages/page1.vue -->
<script setup>
</script>

<template>
<ClientOnly>
  <PageComponent />
</ClientOnly> 
</template>

Maybe we can add a clientOnly: boolean field to definePageMeta macro to improve DX. Wrapping this page to ClientOnly for end users.

I know we already have routeRules. However, I still want to server render the layout when navigating to this page.

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[ExEr7um]

You can use routeRules to achieve that: https://nuxt.com/docs/guide/concepts/rendering#route-rules.

[kingyue737]

You can use routeRules to achieve that: https://nuxt.com/docs/guide/concepts/rendering#route-rules.

Please read my last sentence.

I know we already have routeRules. However, I still want to server render the layout when navigating to this page.

routeRules will render all the things on client side when navigating to that page via address bar. But I want to render the layout on server side like other pages to keep it consistent but only leave the page content to client side.

Furthermore, some modules require SSR like nuxt-auth-utils. I don't know if turning off SSR for a certain page will disable this module on this page.

[mukhriddin-dev]

Good @danielroe

[SemionChi]

is someone on it?
would love to make my first contribution.

[mukhriddin-dev]

@danielroe fire