npm @nuxt/image 2.1.0
v2.1.0
on Node.js NPM

3 hours ago

v2.1.0 is the next minor release.

👀 Highlights

Nuxt Image 2.1 ships eight new image providers, a major upgrade to our image processing engine, and a bunch of fixes across existing providers.

🖼️ IPX v4

Under the hood, we've upgraded to IPX v4 which brings significant improvements:

  • Smaller bundles: IPX is now ESM-only with reduced dependency size
  • Stronger SVG security: SVG sanitization now always runs, regardless of optimization settings. This fixes a potential XSS vector where svgo: false would return untouched SVGs. The sanitizer now removes SMIL attribute injection, foreign content (<foreignObject>, <iframe>, etc.), and unsafe URIs across all elements
  • New image modifiers: opacity, brightness, saturation, hue, lightness, autoorient, dilate, erode, clahe, and linear
  • Better error messages: Invalid modifier arguments now return 400 errors with clear messages instead of cryptic 500s
  • Custom URL parsing: IPX now supports custom URL formats via the parseURL option

🌐 New Providers

This release adds support for eight new image optimization services:

🔧 Provider Improvements

  • Directus: Added support for sharp transforms and a key modifier for named presets (#2207)
  • Sanity: Support for absolute URLs with automatic project/dataset extraction (#2274), and a configurable baseURL for custom CDN setups (#2273)
  • AWS Amplify & Vercel: minimumCacheTTL is now configurable (#2278)

📦 Type Exports

NuxtImgProps and NuxtPictureProps are now exported from the runtime, making it easier to type your own components that wrap <NuxtImg> or <NuxtPicture> (#2115). 

import type { NuxtImgProps, NuxtPictureProps } from '#image'

👉 Changelog

compare changes

🚀 Enhancements

  • deps: migrate to ipx v4 (#2094)
  • provider: add EdgeOne Pages provider (#2173)
  • imgproxy: add provider (#2117)
  • directus: add sharp transforms & key modifier (#2207)
  • sanity: support absolute URLs with project and dataset extraction (#2274)
  • awsAmplify,vercel: make minimumCacheTTL configurable (#2278)
  • sanity: add configurable baseURL option to Sanity provider (#2273)
  • runtime: export Picture and Image props types (#2115)
  • umbraco: add image provider (#2165)
  • flyimg: add Flyimg built-in provider (#2125)
  • cloudflareimages: add new provider (#2100)
  • builderio: add Builder.io Image API provider (#2050)
  • picsum: add Lorem Picsum placeholder image provider (#2106)
  • supabase: add image provider (#2027)

🩹 Fixes

  • flyimg: encode all # characters in color values (137ee63)
  • remove duplicated provider key in generated image options (#2279)
  • nuxt-picture: align preload link type with unhead v3 (#2254)
  • github: set max size of 460 (7e561f6)
  • umbraco: shallow clone modifiers before modifying (237e480)
  • cloudflare: add baseURL for urls with no operations (#2162)
  • nuxt-img: set imagesrcset preload when densities are set w/o sizes (#2176)
  • fastly: handle absolute URLs and merge preexisting query params (#2140)
  • ipx: merge user-defined runtimeConfig.ipx with defaults (#2134)
  • directus: add withoutEnlargement modifier type (#2133)
  • shopify: merge preexisting query params with modifiers (#2135)
  • reduce max-width breakpoint values by 1px (#2132)
  • netlifyImageCdn,netlifyLargeMedia: set netlify remote_images config (#2086)
  • deduplicate formats (#2038)
  • sanitise custom provider import names (#2092)
  • guard access from layer.config.image (23b8cef)
  • bunny: merge query params with existing image src (#2054)
  • do not shadow custom provider types with builtins (#2016)
  • nuxt-picture: allow data-* in imgAttrs (#2017)
  • resolve public/ dir in relation to rootDir (3e07761)

📖 Documentation

  • sanity: document baseURL option (6f59ab1)
  • shopify: update NuxtImg syntax to use v-bind for modifiers (#2277)
  • update list of auto-detected providers (#2147)
  • add sharp cross-platform installation section (#2142)
  • add preload example for NuxtImg (#2124)
  • exempt patterns from cf _routes.json (#2136)
  • update placeholder attributes in <NuxtImg /> example (#2074)
  • add nuxt.care health badge (93de8a9)
  • update docus and add mcp name (#2080)
  • reference from Vercel's Edge Network to Vercel's CDN for image optimization. (2deacc0)
  • fix Nuxt badge icon (#2049)
  • update installation warning (#2061)
  • fix storyblok links (#2046)
  • add deno example (#2012)

📦 Build

  • deps: bump serialize-javascript from 7.0.4 to 7.0.5 (#2249)
  • deps: bump js-cookie from 3.0.5 to 3.0.7 (#2248)
  • deps: bump ws from 8.17.1 to 8.20.1 (#2246)
  • deps: bump h3 from 1.15.6 to 1.15.9 (#2177)
  • deps: bump h3 from 1.15.4 to 1.15.5 (#2085)

🏡 Chore

  • run module prepare in prepack (97d3758)
  • move consola to dev dependencies (#2275)
  • migrate to pnpm v11 (#2236)
  • migrate resolutions to pnpm-workspace.yaml (9b80ce6)
  • migrate npm badges and links to npmx.dev (fd87f7d)
  • remove unused slot-related code from <NuxtPicture> (#2145)
  • update lint scripts in package.json (#2139)
  • remove deprecated github silent config (#2026)
  • revert pnpm trust policy and restore provenance action (13b88c1)
  • update pnpm to 10.21 and enable trust policy (03b5ef4)

🤖 CI

  • add workflow to comment on issues resolved in the latest release (e529f37)
  • improve workflows (#2288)
  • migrate to uppt (#2286)
  • migrate agentscan-action to v2 (2f8b332)
  • add agent-scan workflow to flag bot-authored PRs (23ee710)
  • add merge group config (#2137)
  • rename workflow (777239c)
  • avoid checkout for reproduction comment (a200dae)
  • pin github actions to full-length commit shas (f60d0f7)
  • unpin workflow (d1cb12b)
  • try pinning (09e5efb)
  • update var (402c729)
  • use new shared dependency review workflow (906111c)

🎉 New Contributors

❤️ Contributors

Check out latest releases or
releases around @nuxt/image 2.1.0

Don't miss a new image release

NewReleases is sending notifications on new releases.

Get notifications