Sometimes, we want to fix the ‘document is not defined’ error in Nuxt.js.

In this article, we’ll look at how to fix the ‘document is not defined’ error in Nuxt.js.

How to fix the ‘document is not defined’ error in Nuxt.js?

To fix the ‘document is not defined’ error in Nuxt.js, we can wrap our client side code with the client-only component.

For instance, we write

<template>
  <div>
    <client-only placeholder="loading...">
      <your-component> ... </your-component>
    </client-only>
  </div>
</template>

to wrap the the client side only your-component component with client-only so that it’s only rendered in the browser.

document is defined only in the browser, so we need client-only to avoid the error.

Conclusion

To fix the ‘document is not defined’ error in Nuxt.js, we can wrap our client side code with the client-only component.