v1.0.0-rc.2

[danielroe]

1.0.0-rc.2 is the next release candidate

Timetable: 13 September

👀 Highlights

⚖️ Densities

• We now support densities - and warn if you use a density above 2x (feat: support densities for devices with DevicePixelRatio > 1 #769).

🌅 Formats

• We now support multiple formats in <NuxtPicture> and setting global default values.

📐 Responsive sizes

• 🚨 This is a behaviour change. We now default to responsive-first image sizes, and output sizes/srcset even when only a single size is provided. See feat!: switch sizes default to responsive-first #977 for full details.

⚡️ Static support

• We now support purely-generate-time static images for environments like cloudflare (feat: add ipxStatic provider #878).

There's lots more - do check out the full details below.

Our next RC will be coming soon with all-new IPX v2, as well as some work on better defaults (e.g. automatic format detection where possible).

✅ Upgrading

As usual, our recommendation for upgrading is to run:

nuxi upgrade

This will prompt to refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem.

👉 Changelog

compare changes

🚀 Enhancements

• Support densities for devices with DevicePixelRatio > 1 (#769)
• nuxt-picture: Support multiple image formats (#684)
• Add prepr cms image provider integration (#823)
• Allow setting global format defaults in config (#880)
• Allow setting global quality defaults in config (#884)
• Add uploadcare provider (#740)
• nuxt-img: Placeholder default blur + improve playground (#966)
• Add apiVersion to cloudimage provider (#955)
• ⚠️ Switch sizes default to responsive-first (#977)
• Add ipxStatic provider (#878)

🩹 Fixes

• Apply sizes/srcset when using placeholder (#676)
• Run setup and add none to providers list (#860)
• Remove key for picture/image to stop flicker when loading (#760)
• storyblok: Don't apply resize/format/filter on vector (#870)
• Address miscellaneous bugs with new 'densities' prop (#872)
• Add explicit import for useImage (4865ccb)
• Augment runtime config with explicit ipx key (d73833b)
• Provide default ipx opts earlier (2f62c05)
• Respect densities prop with (#928)
• Warn in dev mode if density is provided above 2x (#973)
• Generate sizes when only a single sizes is provided (#920)

📖 Documentation

• Add rc tag to home page cta (d50d705)
• providers: Cloudflare image is available to all plans now (99cb37f)
• Remove unused module options (07836ae)
• Update link to v0 docs (37395b7)
• Make it nice (08d5645)
• Fix link (cb96767)
• Fix link (343dda0)
• Upgraded documentation (#953)
• Update elements (c3a2e25)
• Add Nuxt Studio (bad4420)
• Update deps and add canonical (#957)
• Improve gradient (9f026b2)
• Update color palette (green) (9f93a2e)
• Update deps (f6b038a)
• Leverage UPageLinks (8423773)
• Fix typo in Storyblok provider (#959)
• Move to @nuxt/ui and leverage autoSubfolderIndex false (549cbf5)
• Migrate to routeRules for redirects (4db1c5a)
• Move to ULandingCard (e0a8183)
• Fix text center on hero (bfcb955)
• Update colors (23ef384)
• Remove unused styles (bd00755)

🏡 Chore

• release: V1.0.0-rc.1 (1e4a95a)
• Update changelog for rc.0 (8cd9b0f)
• Add link to social card (56d8b71)
• Ignore vitest updates for now (eb5702f)
• Upgrade dependencies and dedupe lockfile (#947)
• Bump h3 dependency (75ecf56)
• Revert to Nitro 2.6.2 (680fe4c)
• Update docs and dev dependencies (#972)
• Update lockfile (6058c63)
• Add stackblitz playground link (fc98960)
• Add reproduire workflows (ae81f77)
• Fix typo (60b96ae)

✅ Tests

• Ensure is rendered with custom format (fcc9b7a)
• Pass string to fit (1a8c782)
• Iterate over providers array with for/of (df062d0)
• Move to v8 coverage engine (6fb8ef6)

🎨 Styles

• Add spaces around string literal types (3badcb8)

🤖 CI

• Test coverage and split out release job (c4a8ff6)
• Run tests on node 20.5 until hotfix arrives (a5bd7de)

⚠️ Breaking Changes

• ⚠️ Switch sizes default to responsive-first (#977)

[netlify]

✅ Deploy Preview for nuxt-image ready!

Name	Link
🔨 Latest commit	7a41162
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt-image/deploys/6492245addf25e0008736551
😎 Deploy Preview	https://deploy-preview-882--nuxt-image.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.

[codecov-commenter]

Codecov Report

Patch and project coverage have no change.

Comparison is base (74daa25) 89.73% compared to head (7a41162) 89.73%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #882   +/-   ##
=======================================
  Coverage   89.73%   89.73%           
=======================================
  Files          43       43           
  Lines        2768     2768           
  Branches      312      312           
=======================================
  Hits         2484     2484           
  Misses        283      283           
  Partials        1        1           

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[chrisspiegl]

Is there anything holding this back? It looks like it should be released on the RC channel? No?

[danielroe]

We're aiming for a release early this week.

[chrisspiegl]

That's awesome. Much easier to check out this way even just from github.

Will npm release also happen? I just checked and it's not on there yet.

[danielroe]

Oops! That should be released now.

[chrisspiegl]

Looks like it. Thank you. I am super excited for the "no flicker replace" I helped with to be now in the RC version and thus I can get rid of my patch. Thanks.

[toddpadwick]

Hi @danielroe . thanks for getting this great update over the line!
Am I right in thinking the following should be possible now with ^1.1.0 (to allow the browser to select the right-sized image)? as I can't seem to get it to work.

<nuxt-img provider="sanity" sizes="50vw 75vw 100vw" :alt="teaserImage?.alt" :title="teaserImage?.title"/>

The above incorrectly outputs:

<img src="https://cdn.sanity.io/images/xenf4f6n/production/6050f1d666a18eeb629a9e3899e8ff63fa51d7e5-3984x4808.png?w=2&amp;h=2&amp;auto=format" onerror="this.setAttribute('data-error', 1)" width="3984" height="4808" data-nuxt-img="" sizes="100vw" srcset="https://cdn.sanity.io/images/xenf4f6n/production/6050f1d666a18eeb629a9e3899e8ff63fa51d7e5-3984x4808.png?w=1&amp;h=1&amp;auto=format 1w, https://cdn.sanity.io/images/xenf4f6n/production/6050f1d666a18eeb629a9e3899e8ff63fa51d7e5-3984x4808.png?w=2&amp;h=2&amp;auto=format 2w">

Expected behaviour would be multiple image sizes based on the vw percentages of provided breakpoints, and no size attribute.