v1.0.0-rc.0

[pi0]

Image module support for Nuxt 3 has been started since 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 🚀

Over the RC releases, 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 default image optimizer (unjs/ipx)
• Better support for screen densities
• Better support for static output targets
• Improve for easier integration with Nuxt 3 Core

🚀 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 [nuxt3] domains filter doesn't work with port numbers #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)

💅 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
• Daniel Roe daniel@roe.dev
• Sandro Circi (@Sandros94)
• Raphael Lima dev.raphael@hotmail.com
• Pooya Parsa (@pi0)
• Th3R3alAndr3 andre@eidemann.de
• Damian Głowala
• Clément Ollivier (@clemcode)
• Bartosz Podlewski
• Kara
• Sébastien Chopin seb@nuxtjs.com
• Rubén Rodríguez ruben.rodriguezpaz@gmail.com
• Levi (Nguyễn Lương Huy) (@huynl-96)
• Daniel, Petrica Andrei-Daniel (@danielpetrica)
• Matthias Esterl
• Roald-di
• XLor yjl9903@vip.qq.com
• Alex self@pirsig.net
• Baffo primoz.bevk@gmail.com
• Yaël Guilloux (@Tahul)
• Ross
• Duy NGUYEN nth.duy1511@gmail.com
• Daniil Chudo (@daniil4udo)
• Abhinavr4
• Conrawl Rogers (@Diizzayy)
• Thomas Bnt thomasbnt@protonmail.com
• Zernonia
• Nick Medrano

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[netlify]

✅ Deploy Preview for nuxt-image-v1 ready!

Name	Link
🔨 Latest commit	b486dc5
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt-image-v1/deploys/647f7a65d313a00008e6a9f8
😎 Deploy Preview	https://deploy-preview-793--nuxt-image-v1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[simonkuran]

Really enjoying using Nuxt Image, thanks for all your hard work! Any chance of image density support being included in v1.0.0? This feature is a must for high quality, modern, and performant sites.

#113
#769

[alexbidenko]

This is great that nuxt/image is preparing for release - I really wait it!

But could you review also the two PRs in your repository please:
#676 - very nasty bug with placeholder and sizes simultaneous use;
#684 - very useful feature for upgrading NuxtPicture tag.