vue-image-compare icon indicating copy to clipboard operation
vue-image-compare copied to clipboard

Window is not Defined reference error for Nuxt

Open daletom opened this issue 4 years ago • 1 comments

Hi,

Love this vue-image-compare! Was trying to use on a nuxt project I had but was unfortunately getting a Window is not Defined reference error. Here is the screen shot:

image

So you can see what I was doing in the code:

<nuxt-link to="/cc/living1"
      ><ImageCompare
        :padding="{ left: 50, right: 50 }"
        :before="before"
        :after="after"
        alt="Living Room 1 image before and after"
      >
        <i slot="icon-left" class="fa fa-angle-left" aria-hidden="true"></i>
        <i slot="icon-right" class="fa fa-angle-right" aria-hidden="true"></i>
      </ImageCompare>
    </nuxt-link>

Then here for the script

<script>
import ImageCompare from 'vue-image-compare'

export default {
  data() {
    return {
      before:
        'https://tom.imgix.net/living1before.jpg?w=1000&h=1000&fit=crop&auto=format%2Ccompress',
      after:
        'https://tom.imgix.net/living1after.jpg?w=1000&h=1000&fit=crop&auto=format%2Ccompress'
    }
  },
  components: { ImageCompare }
}
</script>

Any idea what's causing this? Had any success with using this in a nuxt project?

daletom avatar May 08 '20 18:05 daletom

This project was not written with SSR in mind, so that's probably why you are getting this error. Also it's no longer actively mantained, so I suggest forking it and pushing necessary updates for your usecase.

marcincichocki avatar May 13 '20 23:05 marcincichocki