Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Nuxt Tip: Render Component Only on Client-Side

Nuxt Tip: Render Component Only on Client-Side Image
Nuxt

By default, Nuxt uses universal (client-side + server-side) rendering to render your application.

It's a typical use case to access browser APIs like localStorage in your Nuxt components:

MyComponent.vue
<script setup> localStorage.setItem('test', 'A test string') const localStorageItem = ref('') onMounted(() => { localStorageItem.value = localStorage.getItem('test') }) </script> <template> <div style="display: flex; flex-direction: column; gap: 10px"> <span>Hello from client</span> <span>Local storage item: {{ localStorageItem }}</span> </div> </template>

If you try to run your app, Nuxt will throw an error:

Error

localStorage is not defined

This error occurs because the code is first executed on the Node.js server which does not support localStorage.

You can solve this problem by using Nuxt 3's ClientOnly component:

app.vue
<template> <div> <ClientOnly fallback-tag="span" fallback="Loading on server..."> <MyComponent /> </ClientOnly> </div> </template>

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.

Try it yourself in the following StackBlitz project:

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.

Vue Tip: Validate Events and Prop Types

You can validate prop types and events in Vue. If a requirement is not met, Vue will warn you in the browser's JavaScript console.

Vue Tip: Optimize Performance Using shallowRef

shallowRef() is typically used for performance optimizations of large data structures, or integration with external state management systems.