Unable to use with Nuxt.js

[dzcpy]

<template>
  <div id="app">
    <h1>vue-inner-image-zoom Demo</h1>
    <div style="margin-bottom: 30px">
      <h2>Zoom on Hover Example</h2>
      <client-only>
        <inner-image-zoom
          src="@/assets/images/1.png"
          zoom-src="@/assets/images/2.png"
          zoom-type="hover"
          :fullscreen-on-mobile="true"
          :zoom-scale="0.9"
          :zoom-preload="true"
        />
      </client-only>
    </div>
  </div>
</template>

<script>
import InnerImageZoom from 'vue-inner-image-zoom'
export default {
  name: 'App',
  components: {
    InnerImageZoom,
  },
}
</script>

[gigabites19]

Have you resolved or found any alternative?

[dosstx]

I haven't checked lately, but this is how I have it set up in my Nuxt2 application with no issues:

Template:

<InnerImageZoom
            v-if="post.public_id"
            class="rounded"
            :src="
              $config.cloudinary.baseURL +
              $config.cloudinary.cloudName +
              '/t_default/' + // named transformation https://cloudinary.com/documentation/image_transformations#named_transformations
              post.public_id
            "
            :zoom-src="
              $config.cloudinary.baseURL +
              $config.cloudinary.cloudName +
              '/t_zoomed/' + // named transformation https://cloudinary.com/documentation/image_transformations#named_transformations
              post.public_id
            "
            :width="post.width"
            :height="post.height"
            :alt="post.title"
            :has-spacer="true"
            :src-set="
              $config.cloudinary.baseURL +
              $config.cloudinary.cloudName +
              '/image/upload/f_auto,q_60,w_510/' +
              post.public_id +
              ' 510w,' +
              $config.cloudinary.baseURL +
              $config.cloudinary.cloudName +
              '/image/upload/f_auto,q_60,w_607/' +
              post.public_id +
              ' 607w,' +
              $config.cloudinary.baseURL +
              $config.cloudinary.cloudName +
              '/image/upload/f_auto,q_60,w_689/' +
              post.public_id +
              ' 689w,' +
              $config.cloudinary.baseURL +
              $config.cloudinary.cloudName +
              '/image/upload/f_auto,q_60,w_769/' +
              post.public_id +
              ' 769w,' +
              $config.cloudinary.baseURL +
              $config.cloudinary.cloudName +
              '/image/upload/f_auto,q_60,w_841/' +
              post.public_id +
              ' 841w,' +
              $config.cloudinary.baseURL +
              $config.cloudinary.cloudName +
              '/t_default/' +
              post.public_id +
              ' 900w'
            "
          />

Script section:

import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css'
import InnerImageZoom from 'vue-inner-image-zoom'

components: {
    InnerImageZoom
  },

Let me know if that helps you.

[madiyetov]

Hey @gigamarr @dzcpy, maybe you are trying to use 2.0.0 version of this package with Vue 2 (it's for Vue 3). If that's your case, try v1.1.1. It worked for me.

[dosstx]

Just tested....works fine in Nuxt3

[laurenashpole]

Glad this worked out. Thanks @madiyetov and @dosstx for jumping in to help!

[toddpadwick]

Hi everyone, can any of you tell me how they've managed to set this up in Nuxt 3? I have the following but it's not registering the component in my templates:

// ~/plugins/inner-image-zoom.js

import InnerImageZoom from 'vue-inner-image-zoom'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(InnerImageZoom)
})

Also does it support SSR? as this would be crucial for SEO so the images can be indexed.

[dosstx]

I had it working in Nuxt3 way back when they were on RC 1. Now that Nuxt3 is stable, I am going to look at putting it back in. I'll report back.

If you can't wait until then, I believe you have to mount the zoom plugin in the onMounted hook or add the .client extension to the plugin file name so the zoom plugin only loads after SSR.

With that said, why does the the plugin need to be SSR? Just serve a regular image for SSR and then fall back to the zoom plugin for SPA mode.

[toddpadwick]

Thanks @dosstx , that would be fantastic. The reason it would be best to support SSR is so that it still renders the image tag with indexable alt tags, and image src. As you say, I could do something like this which I presume is what you meant:

if (process.client) {
< InnerImageZoom src="xxxxx">
else {
<img src="xxxx">
}

but that feels really clunky. also means the image will have to render twice and may result in a flicker.