Can't use this module with nuxt js; "Reason: ReferenceError: window is not defined"

[Pranavraut033]

Throws the following error when using as a plugin in Nuxt JS.

Reason: ReferenceError: window is not defined

    !(__WEBPACK_AMD_DEFINE_RESULT__ = (function() {
      return dataURLtoBlob
    }).call(exports, __webpack_require__, exports, module),
        __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__))
  } else {}
})(window)

in ~/plugins/image-uploader.js

import Vue from "vue";
import ImageUploader from "vue-image-upload-resize";

Vue.use(ImageUploader);

Work Around

Using <client-only> tag provided by nuxt

<client-only>
  <image-uploader :quality="0.9" :max-width="512" accept="image/*" ... />
</client-only>

and registering components locally as

components: {
  ImageUploader: () => import("vue-image-upload-resize")
},

[KerneggerTim]

Hey @Pranavraut033, there are already instructions in the documentation on how to integrate vue-image-upload-resize in nuxt.js.

1. Create a new file: plugins/vue-image-upload.js, and add the following code:

   
   import Vue from 'vue'
   import ImageUploader from 'vue-image-upload-resize'

Vue.use(ImageUploader)

2. In your nuxt.config.js, add the client plugin:
```javascript
export default {
  // ... other config
  plugins: [
    { src: '~/plugins/vue-image-upload.js', mode: 'client' },
  ]
}

3. When you use the componenent inside a page, make sure to wrap it in tags ( in v < 2.9.0, docs).

   <template>
   <client-only>
   <image-uploader
     :debug="1"
   ></image-uploader>
   </client-only>
   </template>

[Pranavraut033]

Thanks! @KerneggerTim I guess I missed reading that 😅. Thank you for being helpful.