Not working properly with NuxtJs

[MicroDreamIT]

nuxt.config.js

{src: '~/plugins/ProductZoomer',ssr: false}

plugin config in ProductZoomer.js

import Vue from 'vue'
import ProductZoomer from 'vue-product-zoomer'

Vue.use(ProductZoomer);

in product page

<template>
 <div style="width: 600px">
      <no-ssr>
      <ProductZoomer
      :base-images="images"
      :base-zoomer-options="zoomerOptions"
    />
    </no-ssr>
    </div>
</template>
export default{
data(){
return {
zoomerOptions: {
          zoomFactor: 3,
          pane: "pane",
          hoverDelay: 300,
          namespace: "zoomer-left",
          move_by_click: false,
          scroll_items: 4,
          choosed_thumb_border_color: "#dd2c00",
          scroller_position: "left",
          zoomer_pane_position: "right"
        },
        images: {
          'normal_size':  // required
            [
              {'id': '1', 'url': fanImage},
              {'id': '2', 'url': washingImage},
              {'id': '3', 'url': mobileImage},
            ],
          'thumbs':    // optional, if not present will use normal_size instead
            [
              {'id': '1', 'url': fanImage},
              {'id': '2', 'url': washingImage},
              {'id': '3', 'url': mobileImage},
            ]
        },

        products: [
          {
            id: 1,
            title: 'Наружные вентиляторы Dyson Vision Electronics, 60cm диаметр, черный',
            star: 4.8,
            comments: 23,
            price: '159 567',
            type: 'В КОРЗИНУ',
            img: fanImage
          },
}
}
}
}

Thumblist is not working. If css applied then zoom effect is not working

[Asyncinfo]

maybe you can use it like this if (typeof window !== 'undefined') { const ProductZoomer = require('vue-product-zoomer').default Vue.use(ProductZoomer) }

[MicroDreamIT]

@Asyncinfo did not work

[MicroDreamIT]

I think @akulubala should build a separate another repository for nuxt only for example nuxt-product-zoomer.

[akulubala]

@MicroDreamIT as you suggested, I made a demo for nuxt project demo for nuxt. Seems all work fine

[MicroDreamIT]

@akulubala will try tomorrow. did you check with vue-bootstrap as well?

[akulubala]

@MicroDreamIT for bootstrap it works with a small issue.

<div class="container">
    <ProductZoomer :base-images="images" :base-zoomer-options="zoomerOptions"></ProductZoomer>
  </div>

class .container need adjust text align attribute.