This might be a long shot, but I cannot figure out what is going wrong. Hopefully somebody can give me some directions.

I am using the vue quick edit plugin : in my Nuxt project.

Sometimes I will get the error popped up:

[Vue warn]: Error in beforeCreate hook: "ReferenceError: document is not defined"

This seems to happen only the first time I load in the page (unconfirmed!), and afterwards it never happens again (using ctrl+F5, loading in incognito, trying in another browser, ...), it just never shows again and the library works perfectly.

However, it got me hesitating on using the library, since i'm unsure where the error is ing from and if it might impact my end users.

This is the ponent i created for using the inline editable field:

<template>
  <quick-edit
    :aria-label="label"
    @input="updateValue"
  />
</template>

<script>
import QuickEdit from 'vue-quick-edit'

export default {
  ponents: { QuickEdit },
  props: {
    label: {
      type: String,
      required: true,
    },
  },
  methods: {
    updateValue (event) {
      // do something
    },
  },
}
</script>

<style lang="scss" scoped>

</style>

This might be a long shot, but I cannot figure out what is going wrong. Hopefully somebody can give me some directions.

I am using the vue quick edit plugin : https://github./A1rPun/vue-quick-edit in my Nuxt project.

Sometimes I will get the error popped up:

[Vue warn]: Error in beforeCreate hook: "ReferenceError: document is not defined"

This seems to happen only the first time I load in the page (unconfirmed!), and afterwards it never happens again (using ctrl+F5, loading in incognito, trying in another browser, ...), it just never shows again and the library works perfectly.

However, it got me hesitating on using the library, since i'm unsure where the error is ing from and if it might impact my end users.

This is the ponent i created for using the inline editable field:

<template>
  <quick-edit
    :aria-label="label"
    @input="updateValue"
  />
</template>

<script>
import QuickEdit from 'vue-quick-edit'

export default {
  ponents: { QuickEdit },
  props: {
    label: {
      type: String,
      required: true,
    },
  },
  methods: {
    updateValue (event) {
      // do something
    },
  },
}
</script>

<style lang="scss" scoped>

</style>

• javascript
• vue.js
• nuxt.js
• document

2 Answers 2

The ponent try to access the DOM while Nuxt render the page on the server side, the solution is to wrap it in client-only

<template>
  <client-only>
     <quick-edit
       :aria-label="label"
       @input="updateValue"
     />
  </client-only>
</template>

This is because Nuxt render page in server side for first time, so document is really not defined in server.

You could define your plugins in nuxt.config.js to and tell nuxt to use it only in client:

In nuxt.config.js:

...
plugins: [
    { src: "~/plugins/quickEdit.js", ssr: false }
]
...

and in ~/plugins/quickEdit.js:

import Vue from "vue";
import QuickEdit from 'vue-quick-edit'

Vue.use(QuickEdit);

and then just use it in your ponent.