can not be used when ssr.

[JJ]

I tried to use this library with nuxt. However, it seems to refer to window, but it gets an error.
How can I use it?

Or should I try to work with ssr as well?

[Joff Tiquez]

@konojunya I'm not yet implementing this to be compatible with SSR yet but what's the error you see?

[JJ]

@jofftiquez window is not defined

If you write a component in template, there will be no window at create and an error will be issued.

[YukiOta]

I used vue-croppie components wrapped with <no-ssr> in nuxt app, and got the error following.

Cannot read property 'prototype' of undefined

So I used this component as a plugin like this:

// ~/plugins/croppie.js
import Vue from 'vue'
import VueCroppie from 'vue-croppie'

Vue.use(VueCroppie)

// nuxt.config.js
...
  plugins: [
    { src: '~/plugins/croppie.js', ssr: false }
  ],
...

[JJ]

@YukiOta good solution. Thanks

[Irvin Lin]

hi i get an error Cannot read property 'bind' of undefined
when i try to bind

    <no-ssr>
      <!-- Note that 'ref' is important here (value can be anything). read the description about `ref` below. -->
      <vue-croppie
          ref=croppieRef
          :enableOrientation="true"
          @result="result"
          @update="update"
      >
      </vue-croppie>

      <!-- the result -->
      <img v-bind:src="cropped">


    </no-ssr>

mounted () {
    this.$nextTick(() => {
      this.$refs.croppieRef.bind({
          url: 'http://i.imgur.com/Fq2DMeH.jpg',
      })
    });
}

• console.log(this.$refs) in the mounted hook is an empty object.
• i tried computed, updated hooks but still have the same error

[Yehor Skrypnyk]

@lanbau Hello, i Have the same problem. Did you find solution?

[papa-zulu]

If you intend to use Croppie in a single file component and don't want to include it in nuxt.config.js as a plugin, you can also include it like this

if (typeof window !== 'undefined') {
    const VueCroppie = require('vue-croppie').default
    Vue.use(VueCroppie)
}

However, the issue with this.$refs.croppieRef being undefined still exists.
I figured out that the issue with this.$refs is actually because the coppie's mounted() method executed after the component's mount() method, therefore the this.$refs.croppieRef is undefined.
Calling a method when the croppie is initialized seems like a good solution, so I will try to provide it.

[papa-zulu]

@yehorskrypnyk you can try my commit (above this post). I added a croppieInitialized method which is executed when the Croppie object gets created and the reference starts to exist.

[Joff Tiquez]

I used vue-croppie components wrapped with <no-ssr> in nuxt app, and got the error following.

Cannot read property 'prototype' of undefined

So I used this component as a plugin like this:

// ~/plugins/croppie.js
import Vue from 'vue'
import VueCroppie from 'vue-croppie'

Vue.use(VueCroppie)

// nuxt.config.js
...
  plugins: [
    { src: '~/plugins/croppie.js', ssr: false }
  ],
...

This seems to resolve this, closing for now.