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

Question

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>

Ilijanovic · Accepted Answer · 2020-06-14 11:09:12Z

6

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>

answered Jun 14, 2020 at 11:09

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jiminy Over a year ago

This did it for me for the vue-infinite-loading plugin. Thank you.

BeHappy · Accepted Answer · 2020-06-14 11:09:01Z

3

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.

answered Jun 14, 2020 at 11:09

BeHappy

4,0265 gold badges30 silver badges67 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related