Adding Nuxt Image to Our Project

Learn about how to use the Nuxt image component, and apply it to our project.

The Nuxt image module is created and maintained by the core Nuxt team. This module is available to optimize our images, including transforms, resizing, and responsive sizes. It can also integrate with providers such as Cloudinary, Contentful, Sanity, and Cloudflare and optimize the provided images.

Using the <nuxt-img /> component

This is all that is required to now use it in our pages or components. Using our index.vue file, we can replace the existing <img> element:

Get hands-on with 1200+ tech skills courses.