Vuetify Image Component Support?

[nuxt]

Vuetify Image Component Support?

[shadow81627]

@jmarshall9120

I am using @nuxt-image and vuetify in my personal website here is a link to my config file that sets the responsive image breakpoints to be the same as vuetify. If there are any issues or hard to use thing you come across while using @nuxt-image and vuetify together I would love to hear your feedback. I would love to make the integration better.

[farnabaz]

Is there a way to use vuetify v-img component with this module?

The module injects a utility into Vue context. This utility could be used to resize and optimize images using specific provider. For now it has general functionality and you may need to rewrite most of nuxt-image login by yourself. But in the near future this utility will be rich enough to support your needs.

Would it be possible to add a slot to the nuxt-image component and use slot props on the v-img?

Could explain why do you require a slot in the image components? I believe you can design your layout without the slot.

[shadow81627]

@farnabaz sorry I couldn't see the utility in the documentation. If I can get the optimized src and set from the utility then I wouldn't need the slot. Could you please provide an example of the utility in use or add it to the docs usage page?

I am looking for a simple way to get the srcset for optimized images. The slot usage I was looking for was something like this:

<nuxt-image sets="300,300:600,600:900" format="webp" src="/nuxt-icon.png">
    <template v-slot="{placeholder, src, set, height, width, sizes}">
      <v-img :lazy-src="placeholder"
            :src="src"
            :srcset="set"
            :height="height"
            :width="width"
            sizes="sizes" />
    </template>
</nuxt-image>

Or maybe for optimizing a background image:

<nuxt-image sets="300,300:600,600:900" format="webp" src="/nuxt-icon.png">
      <template #default="{ src }">
        <div
          :style="`
          position: relative;
          overflow: hidden;
          background-size: cover;
          background-image: url('${src}');
        `"
        />
      </template>
    </nuxt-image>

[farnabaz]

As you may notice, the module is under development and the feather set of utility does not complete. That's why we don't mention it in docs.

I am looking for a simple way to get the srcset for optimized images

The utility will be the solution for it

Please wait for the first alpha release of the module. It will be anounced by Nuxt official account . Until then do not use image module in production.

[shadow81627]

@farnabaz Thanks, I am looking forward to the alpha release.

[jmarshall9120]

Is a utility for this use case now present? I am trying to integrate images with vuetify and nuxt-image right now.

[MrDizzystick]

Is a utility for this use case now present? I am trying to integrate images with vuetify and nuxt-image right now.

I think what you're looking for is here — there's an example using Vuetify, too:
https://image.nuxtjs.org/api/$img