CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsdocument
Dennis
Dennis

Reputation: 3690

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

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.com/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 coming from and if it might impact my end users.

This is the component 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 {
  components: { QuickEdit },
  props: {
    label: {
      type: String,
      required: true,
    },
  },
  methods: {
    updateValue (event) {
      // do something
    },
  },
}
</script>

<style lang="scss" scoped>

</style>

Upvotes: 3

Views: 4216

Answers (2)

Ilijanovic
Ilijanovic

Reputation: 14914

The component 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>

Upvotes: 6

BeHappy
BeHappy

Reputation: 3988

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 component.

Upvotes: 3

Related Questions