marcincichocki / vue-image-compare

Compare 2 images using slider with vue.js
https://marcincichocki.github.io/vue-image-compare/
MIT License
33 stars 20 forks source link

Window is not Defined reference error for Nuxt #8

Open daletom opened 4 years ago

daletom commented 4 years ago

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?

marcincichocki commented 4 years ago

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.