search

samjonesigd / vue-image-zoomer

Image zoom component for Vue.js
https://samueljon.es/vue-image-zoomer
MIT License
108 stars 10 forks source link

ReferenceError: window is not defined #9

Closed choyan closed 3 years ago

choyan commented 3 years ago

I am trying to use this plugin with one of our NuxtJS project. After following the instruction provided by the Nuxt Plugin guide. But after several different attempts, I was unable to use this plugin in the project. Was getting this error in my continuous attempts:

ReferenceError: window is not defined
samjonesigd commented 3 years ago

@choyan try this https://debbie.codes/blog/nuxt-add-vue-plugins/ take note of the client stuff

samjonesigd commented 3 years ago

@choyan any update on the above?

choyan commented 3 years ago

Sorry for coming back to the issue very lately. I have tried applying it in several ways. All of the tried methods failed for me. I tried using renaming the file with client.js extension, using client-only component and also adding mode: 'client' to nuxt.config.json. But couldn't get rid of the following error Reason: ReferenceError: window is not defined

samjonesigd commented 3 years ago

Hi @choyan I got it working with nuxt using the following.

Create a folder called 'plugins' in the root of your project.

In there create a file called 'imagezoom.client.js'

Code in that file:

import Vue from 'vue';
import imageZoom from 'vue-image-zoomer';

Vue.component('image-zoom', imageZoom);

In nuxt.config.js add this to the plugins array:

{ src: '~/plugins/imagezoom.client.js' }

Then use the <image-zoom> element anywhere in your project. Do not register the component in the component object in a vue file.

image