vue-image-compare
vue-image-compare copied to clipboard
Window is not Defined reference error for Nuxt
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:
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?
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.