"document is not defined" in Nuxt.js : <p>I am trying to use <a href="https://github.com/jshjohnson/Choices" rel="noreferrer">Choices.js</a> within a Vue component. The component compiles successfully, but then an error is triggered:</p>

<blockquote>
  <p>[vue-router] Failed to resolve async component default:
  ReferenceError: document is not defined</p>
</blockquote>

<p>In the browser I see:</p>

<blockquote>
  <p>ReferenceError document is not defined</p>
</blockquote>

<p>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.</p>

<p><strong>nuxt.config.js</strong></p>

<pre><code>build: {
  vendor: ['choices.js']
}
</code></pre>

<p><strong>AppCountrySelect.vue</strong></p>

<pre><code>&lt;script&gt;
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)
  }
}
&lt;/script&gt;
</code></pre>

<p>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.</p>

<p>Any ideas at all where I'm going wrong?</p>

<p>Thanks.</p>
