Nuxt Tip: Render Component Only on Client-Side

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:

<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:

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:

<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: