"document is not defined" in Nuxt.js

Question

I am trying to use Choices.js within a Vue component. The component compiles successfully, but then an error is triggered:

[vue-router] Failed to resolve async component default: ReferenceError: document is not defined

In the browser I see:

ReferenceError document is not defined

I think this has something to do with the SSR in Nuxt.js? I only need Choices.js to run on the client, because it's a client only aspect I guess.

nuxt.config.js

build: {   vendor: ['choices.js'] } 

AppCountrySelect.vue

<script> import Choices from 'choices.js'  export default {   name: 'CountrySelect',   created () {     console.log(this.$refs, Choices)     const choices = new Choices(this.$refs.select)     console.log(choices)   } } </script> 

In classic Vue, this would work fine, so I'm very much still getting to grips with how I can get Nuxt.js to work this way.

Any ideas at all where I'm going wrong?

Thanks.

Answer 1

It's a common error when you start a Nuxt project ;-)

The Choices.js lib is available only for client-side! So Nuxt tried to renderer from server-side, but from Node.js window.document doesn't exist, then you have an error.
nb: window.document is only available from the browser renderer.

Since Nuxt 1.0.0 RC7, you can use <no-ssr> element to allow your component only for client-side.

<template>   <div>     <no-ssr placeholder="loading...">       <your-component>     </no-ssr>   </div> </template> 

take a look at the official example here: https://github.com/nuxt/nuxt.js/blob/dev/examples/no-ssr/pages/index.vue

---

Update:

Since Nuxt >= 2.9.0, you have to use the <client-only> element instead of <no-ssr>:

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

To know more, see nuxt docs: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component