"document is not defined" in Nuxt.js

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

The accepted answer (while correct) was too short for me to understand it and use it correctly, so I wrote a more detailed version. I was looking for a way to use plotly.js + nuxt.js, but it should be the same as the OP's problem of Choice.js + nuxt.js.

MyComponent.vue

<template>  <div>    <client-only>      <my-chart></my-chart>    </client-only>  </div></template><script>export default {  components: {    // this different (webpack) import did the trick together with <no-ssr>:    'my-chart': () => import('@/components/MyChart.vue')  }}</script>

MyChart.vue

<template>  <div>  </div></template><script>import Plotly from 'plotly.js/dist/plotly'export default {  mounted () {    // exists only on client:    console.log(Plotly)  },  components: {    Plotly  }}</script>

Update: There is <client-only> tag instead of <<no-ssr> in Nuxt v>2.9.0, see @Kaz's comment.

You need to add it as a plugin and then disable SSR for it.

As the document and window are not defined on the server-side.

Your nuxt.config.js should look like below

plugins: [{ src: '~/plugins/choices.js' } // both sides{ src: '~/plugins/client-only.js', mode: 'client' }, // only on client side{ src: '~/plugins/server-only.js', mode: 'server' } // only on server side],