Optimize Your Images with Nuxt Image

Nuxt Image is a module you can use to transform and resize images in your nuxt app using the built-in optimizer or other Image CDN Providers. In this video, I'll show you how to use Nuxt Image Module with a demo showing the performance gains you get from using it.

Hope you enjoy the video :)

___
___
Timestamps

0:00 - Intro
0:24 - What is Nuxt Image?
1:06 - What is Nuxt?
1:53 - Features of Nuxt Image
3:20 - Demo comparing Native Img and Nuxt Image Component
9:44 - Sourcegraph Cloud
13:30 - Outro
___

___
🌼 Support Me on Patreon 🌼
___
☕️ Buy Me A Coffee ☕️
___

📹 Recording Kit 📹

🖥 Desk Equipment 🖥
___
✨ About ✨

✨ Contact ✨
If you'd like to sponsor a video

🌱 Let's Stay Connected 🌱
___

[rick]

Just a heads up for everyone: you need to place images that you want to use with '<nuxt-img>' in the 'static' directory, not the assets directory. Found that out the hard way :(

Also, nice video :D

[damiancarrillo]

Thanks for creating this video. It was very clear and showed me exactly what I wanted to know with the nice benefit of also showing how you use sourcegraph!

[luqmanoop]

I know how hard making these videos can be but I just wanted to say that you keep going :)

[viralplanet]

This is lovely. First time seeing a femal coder.. I just watch a video you got a GitHub plaque…. Respect 🙌🙌🙌

[chaderenyore]

it's a great module, the probelm I have with it though is the lazy loading that doens't work on all browsers yet. The main reason I needed an image module or component for nuxt was for lazy loading, I don't want to load the images on page load but now it turns out this module doesn't use the intersection observer like g-image for gridsome..
I looked at my network tab and saw that the images load all at once, I mean then what's the module for? With the way broswers implement features though I think it will be a long time before we can harness the full power of this module.

This is a nice video, I was just looking for a place to pour out my complaint about the module.

[jeremy-stewart]

Thanks for the great video. You explained this module very well :-)

[LewisYeh]

Thanks for the great video!!
The problem came up when I using nuxt-img on GCP, it shows

✖ Nuxt Fatal Error
Error: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'ipx' imported


it works fine on my local side...