Search⌘ K
Home
Courses
A Beginner’s Guide To Nuxt 3

Adding Nuxt Image to Our Project

Explore how to integrate the Nuxt image module into your Nuxt 3 project to replace standard images with optimized, responsive components. Understand the benefits of automatic resizing, lazy loading, format selection, and how to configure image sizes for different screen widths to improve performance and user experience.

We'll cover the following...

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:

Javascript (babel-node)
<ul class="images">
  <li v-for="image in displayImages" :key="image.id">
    <nuxt-img
      class="img_preview"
      :src="image.webformatURL"
      @click="openModal(image)"
    />
    <!-- <img
      class="img_preview"
      :src="image.webformatURL"
      @click="openModal(image)"
    /> -->
  </li>
</ul>

  • Lines 3–7: This is how we can use the provided <nuxt-img ...