Skip to content

chore(deps): update dependency @nuxt/image to v2 - #222

Open
renovate[bot] wants to merge 1 commit into
mainfrom
renovate/nuxt-image-2.x
Open

chore(deps): update dependency @nuxt/image to v2#222
renovate[bot] wants to merge 1 commit into
mainfrom
renovate/nuxt-image-2.x

Conversation

@renovate

@renovate renovate Bot commented Nov 5, 2025 •
edited
Loading

Copy link
Copy Markdown

This PR contains the following updates:

Package Change Age Confidence
@nuxt/image (source) 1.11.0 → 2.1.0 age confidence

Release Notes

nuxt/image (@​nuxt/image)

v2.1.0

Compare Source

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

v2.0.0

Compare Source

We're excited to announce Nuxt Image v2! 🎉 This release focuses on TypeScript support, performance improvements, and better developer experience.

👀 Highlights

[!NOTE]
Nuxt Image v2 requires Nuxt 3.1+. If you're on Nuxt 3.0.x, you'll need to upgrade to at least 3.1 first.

🎯 TypeScript support

The biggest change in v2 is full TypeScript support throughout the module (#​1802).

Typed providers

Image providers now use defineProvider for type-safe configuration:

// Before (v1)
export const getImage = (src, { modifiers, baseURL }) => {
  // ...
  return { url }
}

// After (v2)
import { defineProvider } from '@&#8203;nuxt/image/runtime'

export default defineProvider({
  getImage(src, { modifiers, baseURL }) {
    // Fully typed modifiers
    // ...
    return { url }
  }
})
Type-safe configuration

Module options are now fully typed. For example, providers that require a baseURL will enforce it at the type level in your nuxt.config.ts:

export default defineNuxtConfig({
  image: {
    provider: 'cloudinary',
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/...' // TypeScript error if missing!
    }
  }
})
Typed composables

The $img helper and useImage() composable have full type inference (#​1844):

const img = useImage()

// Full autocomplete for modifiers
const url = img('/image.jpg', { 
  width: 300,
  height: 200,
  fit: 'cover' // TypeScript knows the valid values!
})
🚀 IPX v3

We've upgraded to IPX v3 (#​1799) for better performance and better sharp binary handling. The upgrade includes automatic detection of the correct sharp binaries for your deployment architecture.

🔌 Server-side utilities

You can now use image helpers directly in Nitro server endpoints (#​1473).

// server/api/og-image.ts
export default defineEventHandler((event) => {
  const img = useImage()
  
  return {
    url: img('/hero.jpg', { 
      width: 1200, 
      height: 630,
      fit: 'cover' 
    })
  }
})
🎨 Component improvements
Template refs

<NuxtImg> now exposes the underlying <img> element via template refs:

<script setup>
const img = useTemplateRef('img')

onMounted(() => {
  // Direct access to the native img element
  console.log(img.value.imgEl)
})
</script>

<template>
  <NuxtImg ref="img" src="/image.jpg" />
</template>
Typed slots

Both <NuxtImg> and <NuxtPicture> now have properly typed default slots.

🌐 New providers

We've added two new providers:

  • Shopify (#​1890) - for Shopify store images
  • GitHub (#​1990) - for GitHub avatars and user content
export default defineNuxtConfig({
  image: {
    provider: 'shopify',
    shopify: {
      baseURL: 'https://your-store.myshopify.com'
    }
  }
})
⚡ Performance

We've made several optimizations to reduce bundle size and improve runtime performance:

  • Better URL encoding (#​1813) - Switched to URLSearchParams for more reliable parameter handling
  • Reduced runtime utilities (#​1816) - Removed unused code and simplified implementations
  • Streamlined screen sizes (#​1931) - Aligned default breakpoints with Tailwind CSS
🎯 Better layer support

Nuxt Image now properly supports custom image directories within Nuxt layers (#​1880), making it easier to organize images in modular projects.

⚠️ Breaking changes
Provider API

The biggest breaking change is how providers are defined. All providers now use a default export with the defineProvider wrapper:

- export const getImage = (src, { modifiers }) => { ... }
+ export default defineProvider({
+   name: 'my-provider',
+   getImage(src, { modifiers }) { ... }
+ })

If you maintain a custom provider, you'll need to update it. But you get full TypeScript support in return!

Removed providers

The deprecated layer0 and edgio providers have been removed.

URL formatters

If you have custom providers using joinWith for parameter formatting, you'll need to update them to use the formatter function with createOperationsGenerator. See the migration guide for details.


#### Screen sizes

Default screen sizes now match Tailwind CSS. We've removed `xs` (320px) and `xxl` (2560px). See the [migration guide](https://image.nuxt.com/get-started/migration#update-screen-sizes) for how to add them back if needed.
Removed utilities

We've removed several unused runtime utilities. If you were importing internal utilities directly, check if they still exist.

✅ Upgrading

Check out our comprehensive migration guide for step-by-step upgrade instructions.

The quick version:

npm install @&#8203;nuxt/image@latest

Most apps can upgrade with no code changes. If you have custom providers, you'll need to update them to use defineProvider - see the migration guide for examples.

🐛 Bug fixes

This release includes several fixes:

  • Preload links: Fixed preload for multiple densities with single size (#​1851)
  • Crossorigin attributes: Correct crossorigin on preload links (#​1836)
  • Provider-specific formats: AWS Amplify and Vercel providers now have proper format allow lists (#​1996)
  • Hygraph: Prevented broken image URLs (#​1999)
  • Preset sizes: Fixed preset size application when component sizes prop is undefined (#​1919)
  • Cloudflare: Don't add baseURL if there are no operations (#​1790)
  • IPX: Always use IPX provider if external baseURL is provided (#​1800)
🙏 Thank you

Thank you to all the contributors who made this release possible! This includes contributions from dozens of community members who helped with features, bug fixes, documentation improvements, and feedback.

👉 Changelog

compare changes

🚀 Enhancements
  • Add support for image helpers in nitro endpoints (#​1473)
  • deps: Upgrade to ipx v3 (#​1799)
  • ipx: Log the architecture of the build (#​1808)
  • ⚠️ Typed providers + modifiers (#​1802)
  • Add type for default nuxt-picture slots (0e4f174)
  • nuxt-img: Add types for default slot (c4bba1b)
  • Add shopify provider (#​1890)
  • Add support for image helpers in nitro endpoints (#​1473)
  • ipx: Log the architecture of the build (#​1808)
  • cloudimage: Make baseURL optional with cdn (#​1951)
  • github: Add provider for github avatars (#​1990)
  • nuxt-img: Expose element (#​1834)
  • Support custom image dirs within layers (#​1880)
  • Strongly type $Img/useImage methods (#​1844)
  • Add type hints for provider option (64c76ee)
🔥 Performance
  • nuxt-img: Call decode before swapping from placeholder (#​2008)
🩹 Fixes
  • Remove layer0 and edgio providers (#​1763)
  • Add back layer0 and edgio providers (without) tests (fee826c)
  • cloudflare: Don't add baseURL if there are no operations (#​1790)
  • ipx: Always use ipx provider if external baseURL is provided (#​1800)
  • ipxStatic: Strip repeated slashes from image path (#​1801)
  • edgio,layer0: ⚠️ Remove providers (#​1809)
  • ⚠️ Use URLSearchParams as default formatter (#​1813)
  • nuxt-picture: Export DefaultSlotProps (891d79a)
  • aliyun: Explicitly import useRuntimeConfig (268eb9c)
  • Remove layer0 and edgio providers (#​1763)
  • Add back layer0 and edgio providers (without) tests (a99ce09)
  • cloudflare: Don't add baseURL if there are no operations (#​1790)
  • ipx: Always use ipx provider if external baseURL is provided (#​1800)
  • ipxStatic: Strip repeated slashes from image path (#​1801)
  • Avoid deep type instantiation (12b37a2)
  • Add types to new node + shared contexts (#​1907)
  • nuxt-img: Correct preload link for multiple densities + single size (#​1851)
  • nuxt-img: Add appropriate crossorigin attribute to preload link (#​1836)
  • awsAmplify,vercel: Set allow list of formats for providers (#​1996)
  • hygraph: Prevent broken image urls (#​1999)
  • nuxt-img: Apply preset sizes when component sizes prop is undefined (#​1919)
💅 Refactors
  • ⚠️ Remove unused runtime utilities and simplify code (#​1816)
  • ⚠️ Remove xs and xxl screen sizes (#​1931)
📖 Documentation
  • Fix typo (#​1762)
  • Fix link to runtime/providers (#​1819)
  • Refactor to use docus v3 (#​1868)
  • Put back social card (#​1870)
  • Fix typo (#​1762)
  • Fix link to runtime/providers (#​1819)
  • Add back plausible for stats (42cbf6f)
  • deps: Upgrade to docus v4 (#​1916)
  • Update README, add section for how to install (#​1929)
  • Use nuxt rather than nuxi (809e726)
  • Fix getImage in the example of custom provider (#​1949)
  • Fix components source file link (#​1955)
  • Upgrade to docus v5 (#​1975)
  • Add example for densities prop usage (#​1937)
  • Adjust grammar and improve clarity in providers page (#​1945)
  • Explain how to configure ipx at runtime (#​1738)
  • Add none provider documentation (#​2002)
  • Fix link to css file (f87793f)
  • Add baseURL to bunny example (3654b3e)
📦 Build
  • Pull in types from index (533b927)
  • Update ambient type hint (62998ab)
🏡 Chore
  • Disable shamefully-hoist (#​1795)
  • Do not ignore typescript upgrades (9421fa5)
  • Switch to using typesVersions field (aa39ef4)
  • Allow major bumps in changelog (3989629)
  • Prefer nuxt over nuxi (#​1857)
  • Test against node 20 (5507c0d)
  • Disable shamefully-hoist (#​1795)
  • Do not ignore typescript upgrades (0809991)
  • Switch to using typesVersions field (b4af05a)
  • Allow major bumps in changelog (d486587)
  • Enable oxc-resolver build (4be31c7)
  • Release v1.11.0 (3123997)
  • config: Migrate renovate config (#​1906)
  • Add plausible to knip (a988f40)
  • Add verifyDepsBeforeRun: install (#​2000)
  • Remove .npmrc (578c04b)
  • Update redirected URL (#​2006)
✅ Tests
  • Exclude layer0 + edgio from unit tests (ffe2177)
  • Add size snapshot (#​1815)
  • Bump timeout (6fe8401)
  • Skip bundle size tests in ecosystem ci (301c504)
  • Explicitly import runtime utils (0c729e2)
  • Migrate to vitest projects (0fc2980)
  • Exclude layer0 + edgio from unit tests (3682a90)
  • Add 3x retries for e2e tests (cfdf83a)
  • Add snapshots for image/picture rendering without sizes (b4b8b0e)
🤖 CI
  • Add release workflow and add pkg.pr.new (#​1791)
  • Set fetch-depth (ec565cd)
  • Remove forced corepack installation (86dc4a6)
  • Run tests against 1.x branch (0c83646)
  • Add release workflow and add pkg.pr.new (#​1791)
  • Set fetch-depth (18ae6c7)
  • Test vs node 20 (e6babef)
  • Run tests on last node LTS (fa391c5)
  • Use npm trusted publishing (49ad2b7)
  • Add provenance action to check for downgrades in provenance (7edc44a)
  • Always release on pkg.pr.new (30eb4a3)
  • Use push of tag as release trigger (195cec0)
⚠️ Breaking Changes
  • ⚠️ Typed providers + modifiers (#​1802)
  • edgio,layer0: ⚠️ Remove providers (#​1809)
  • ⚠️ Use URLSearchParams as default formatter (#​1813)
  • ⚠️ Remove unused runtime utilities and simplify code (#​1816)
  • ⚠️ Remove xs and xxl screen sizes (#​1931)
❤️ Contributors

Configuration

📅 Schedule: (UTC)

  • Branch creation
    • At any time (no schedule defined)
  • Automerge
    • At any time (no schedule defined)

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch from 2724966 to 967fa37 Compare November 10, 2025 16:58
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch from 967fa37 to 59dc1ad Compare November 19, 2025 00:09
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch from 59dc1ad to 825dabc Compare December 3, 2025 19:55
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch from 825dabc to 2f57c58 Compare December 31, 2025 15:01
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch from 2f57c58 to 7c54e9a Compare January 8, 2026 20:26
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch 2 times, most recently from a246279 to 4781be4 Compare January 23, 2026 18:28
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch 2 times, most recently from a3f37fd to 6414f15 Compare February 17, 2026 14:17
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch from 6414f15 to 6784d36 Compare March 5, 2026 19:13
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch from 6784d36 to c9aec6f Compare March 13, 2026 17:01
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch from c9aec6f to 4e5f7d8 Compare April 1, 2026 18:20
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch from 4e5f7d8 to 03628c6 Compare April 8, 2026 18:34
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch from 03628c6 to 112808b Compare April 29, 2026 14:40
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch 2 times, most recently from 6bdb572 to 309e4d0 Compare May 18, 2026 19:04
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch 3 times, most recently from 9cd5129 to e1ae834 Compare June 1, 2026 23:18
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch from e1ae834 to 1a774a2 Compare June 11, 2026 11:02
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch from 1a774a2 to c930c3f Compare July 12, 2026 17:07
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch 2 times, most recently from 8ffabfa to a5b49ae Compare July 24, 2026 21:57
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch from a5b49ae to b0585fc Compare July 28, 2026 19:41
@renovate
renovate Bot force-pushed the renovate/nuxt-image-2.x branch from b0585fc to 5295bd8 Compare July 30, 2026 18:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

breaking dependencies

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

0 participants