Work on updating the image module for Nuxt 3 began on Jul 8, 2022. After months of progress and continuous feedback, this is the first (semi-stable) version of the Image module ready for Nuxt 3 🚀

🚦 Roadmap to v1

This is the first release candidate (RC1). We plan a quick RC process, and over that period, we plan to mainly stabilize the module and add some enhancements:

• Addressing most demanded feature requests and bug fixes
• Support multi-sources and server-side caching using Nuxt 3's built-in Storage Layer for the default image optimizer (unjs/ipx)
• Better support for screen densities
• Better support for static output targets (we are tracking key issues)
• Integrate more closely with Nuxt 3 Core

✅ Upgrading

If you have been using the edge channel, you can now switch back to the main @nuxt/image package name. You can use the rc tag which will pull in the latest release candidate.

  {
    "devDependencies": {
-     "@nuxt/image-edge": "latest",
+     "@nuxt/image": "rc",
      "nuxt": "latest"
    }
  }

You should also update your nuxt.config:

  export default defineNuxtConfig({
    modules: [
-     '@nuxt/image-edge'
+     '@nuxt/image'
    ],
  })

👉 Changelog

🚀 Enhancements

• Initial rewrite for nuxt 3 support (64dfecc)
• Migrate to composition api (#571)
• vercel: Set image config using v3 output api (4d8aab0)
• Support prerendering static images (#614)
• Support load event for nuxt-img and nuxt-picture (#702)
• Add data-nuxt-img and data-nuxt-pic attrs (#747)
• Add none provider and only enable ipx when node present (#840)
• Add directus provider (#787)
• Add wagtail provider (#774)

🔥 Performance

• Do not inject $img by default (#836)

🩹 Fixes

• Add missing defineNuxtPlugin import (e5ca160)
• Use resolver to resolve built-in providers (bb8381c)
• ipx: Ensure leading slash is added to ipx url (93ce78a)
• vercel: Remove dependency of fs-extra (23076b8)
• Update nuxt version constraint (#603)
• Add implicit imports (db0934c)
• Provide empty array if source data is not present (#606)
• vercel: Update image to images and add ttl (a3cd82c)
• imagekit: Transformation query param generation (#610)
• AddAutoImport has been renamed to addImports (#648)
• Update ipx (b087201)
• nuxt-picture: Only pass defined props to <nuxt-img> component (#620)
• Default dir value (cc4a09d)
• nuxt-img: Access prerender.env only in server side (#661)
• Pass ipx maxAge option from options (#706)
• ⚠️ Improve prerendering support (#725)
• module: Parse options.domains with parseURL #659 (#680, #659)
• cloudinary: Update mapping key for density (#730)
• unsplash: Merge query params with src (#712)
• ipx: Use actual relative ipx dir (#779)
• ipx: Support runtime nuxt baseURL (#778)
• ipx: Set prerenderer config as well (#784)
• Use absolute path for prerenderer (#788)
• sanity: Add dpr modifier (#789)
• pkg: Relax upper node version constraint (#818)
• Correctly apply provided format to <NuxtPicture> (#827)
• Type vercel nitro config correctly (2679d60)
• Remove ignored second arg for hash (52ba7aa)
• Prerender static images when calling createImage (d927447)
• nuxt-picture: Render svgs with src not srcset (46939f1)
• Ensure $img injection is correctly typed (ed573bb)
• Test for imgEl before setting src (e5a294e)
• Respect dir option from module for ipx (7e187e5)
• Use publicDir for runtime ipx generation (#849)
• pkg: Use esm build as main field (#848)
• Emit synthetic load and error events on initial hydration (#842)
• Remove placeholder plugin (1cd2ef1)

💅 Refactors

• ipx: Use event.node.req and event.node.res (#777)

📖 Documentation

• Advice modules instead of buildModules (#557)
• Update static/ dir to public/ (#558)
• Update lint to nuxt 3 (4e029e2)
• Update default provider section (35c8a9d)
• Change static/ to public/ (#566)
• Upgrade docus and improve structure (#564)
• Fix link to unsplash license (#579)
• Update to script setup (4b27db3)
• Upgrade to latest Docus (#678)
• Fix cloudflare usage example (255d991)
• Fix typo (#670)
• Fix typo in api docs (#754)
• Update badge (4cee565)
• Update codesandbox link and refresh example lockfile (10c8735)
• Update nuxt config definition (#816)
• Update default dir value (f293072)

📦 Build

• Change node engine requirement to be same as nuxt3 (4c23770)

✅ Tests

• Add back and update tests (#830)
• Update implementation of <ProviderSelector> (295b8c4)
• Test types in module and fixtures (28f550d)
• Sort file snapshot (b3a9089)
• Remove leftover code (c7531e0)
• Add test for URI encoding (852371a)
• Add test for load and error events (#841)
• Add unit test for correct crop sizing (682b674)
• Extract mountImage helper (5c21f4c)

🎨 Styles

• cloudinary: Remove dangle comma (#733)
• Fix lint (2ed711e)

❤️ Contributors

• Bono (@bonomite)
• Daniel Roe (@danielroe)
• Sandro Circi (@Sandros94)
• Raphael Lima (@oraphadev)
• Pooya Parsa (@pi0)
• Th3R3alAndr3 (@th3r3alandr3)
• Damian Głowala (@DamianGlowala)
• Clément Ollivier (@clemcode)
• Bartosz Podlewski (@podlebar)
• Kara (@kara)
• Sébastien Chopin (@atinux)
• Rubén Rodríguez (@rubenRP)
• Levi (Nguyễn Lương Huy) (@huynl-96)
• Daniel, Petrica Andrei-Daniel (@danielpetrica)
• Matthias Esterl (@madc)
• Roald-di (@roald-di)
• XLor (@yjl9903)
• Alex (@piscis)
• Baffo (@baffo)
• Yaël Guilloux (@Tahul)
• Ross (@chadsr)
• Duy NGUYEN (@nthduy)
• Daniil Chudo (@daniil4udo)
• Abhinavr4 (@Abhinavr4)
• Conrawl Rogers (@Diizzayy)
• Thomas Bnt (@thomasbnt)
• Zernonia (@Zernonia)
• Nick Medrano (@dosstx)

We have updated documentation with a fresh look and Nux 3.

Alongside dependency upgrades and security and stability enhancements from unjs/ipx, this release introduces new providers:

• Cloudimage: https://image.nuxtjs.org/providers/cloudimage
• Layer0: https://image.nuxtjs.org/providers/layer0
• Cloudflare: https://image.nuxtjs.org/providers/cloudflare

🚀 Enhancements

• cloudinary: Add types for options and modifiers (#511)
• Cloudimage provider (#523)
• twicpics: Fix modifiers and improve documentation (#503)
• storyblok: Update to the new service (#497)
• Layer0 provider (#501)
• Cloudflare provider (#359)
• Support placeholder (#477) experimental

🩹 Fixes

• ipx: Allow overriding baseURL regardless of router base (#484)
• ipx: nuxtContext is optional (37f09b0)
• nuxt-img, nuxt-picture: Return empty object from head when preload is disabled (#528)
• Normalize domains to hostname (resolves #486)

📖 Documentation

• Mention lazy loading for (#505)
• Add nuxt3 incompatibility warning (#504)
• Update banner (d9783d6)
• Add example for default modifiers (#509)
• Mention avif format support (ceb4ad8)
• Upgrade to docus (#529)

⚠️ Breaking Changes

• ⚠️ Update dependencies (d4de9d3)
• pkg: ⚠️ Add engines field to require node>=14.16 (38d77f1)

✅ Tests

• Update twicpics tests (8601e61)

❤️ Contributors

• Amr Hamdy
• Damien Robinson
• Gavyn McKenzie
• Jakub Doboš
• Jean-Matthieu DECHRISTÉ
• Jorge Martins
• Keen Yee Liau
• Miguel Beignon
• Paw
• Robert
• Sylvain Marroufin