"document is not defined" in Nuxt.js

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.


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


import Choices from 'choices.js'

export default {
  name: 'CountrySelect',
  created () {
    console.log(this.$refs, Choices)
    const choices = new Choices(this.$refs.select)

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?


177 thoughts on “"document is not defined" in Nuxt.js”

Leave a Comment