feat: allow switching between max-width and min-width

[DamianGlowala]

🔗 Linked issue

resolves #1211

📚 Description

Adds responsiveBreakpoints option to choose between max-width (default) and min-width for generating sizes prop. This option can be configured both for a module and for a given component.

Naming can be changed if anyone suggests a better suited alternative.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@nuxt/image@2127

commit: 23744f4

[cloudflare-workers-and-pages]

Deploying nuxt-image with    Cloudflare Pages

Latest commit:	23744f4
Status:	✅  Deploy successful!
Preview URL:	https://c98105b6.nuxt-image.pages.dev
Branch Preview URL:	https://feat-responsive-breakpoints.nuxt-image.pages.dev

View logs

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a new responsiveBreakpoints option (values: 'max-width' | 'min-width') to the Nuxt Image module and types, with default 'max-width' and a per-component prop. Passes the option through NuxtImg/NuxtPicture to the runtime sizing logic, updates getSizes/finaliseSizeVariants to generate media queries according to the chosen strategy, and exposes the prop in BaseImageProps. Documentation pages were updated with configuration and prop examples. Tests and snapshots were updated/duplicated to cover both breakpoint modes.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Out of Scope Changes check	❓ Inconclusive	The PR contains duplicate test suites in test/nuxt/image.test.ts and test/nuxt/picture.test.ts that appear unintentional and may indicate accidental duplication during development.	Review and remove duplicate test suite definitions in image.test.ts and picture.test.ts to ensure clean test structure.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main feature: adding the ability to switch between max-width and min-width responsive breakpoint strategies.
Description check	✅ Passed	The description accurately explains the feature being added and references the relevant linked issue, providing context for the changes.
Linked Issues check	✅ Passed	The PR fully implements the requested feature from issue #1211 by adding a responsiveBreakpoints option to choose between max-width and min-width for image generation.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/responsive-breakpoints-option

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@test/nuxt/picture.test.ts`:
- Line 359: Add the missing trailing comma after the object property
responsiveBreakpoints: 'min-width' in the test case so the object literal
conforms to the linter rules; locate the object containing the
responsiveBreakpoints property in picture.test.ts (search for
"responsiveBreakpoints" or the test that configures picture component) and
append a comma after 'min-width'.
- Around line 330-338: The test attempts to delete a non-configurable property
nuxtApp.$img and also includes a redundant afterEach; remove the delete
nuxtApp.$img line from the beforeEach and delete the entire afterEach block,
leaving only deletion of nuxtApp._img in beforeEach so useImage() can lazily
recreate $img from _img without causing a TypeError and to avoid duplicate
teardown.

[coderabbitai]

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@test/nuxt/picture.test.ts`:
- Around line 330-338: Remove the unsafe deletion of nuxtApp.$img and the
redundant afterEach block: only delete nuxtApp._img in the beforeEach because
useImage() will lazily recreate $img from _img; remove the entire afterEach(...)
that duplicates the beforeEach cleanup and also remove the now-unused afterEach
import at the top of the test file; leave any deletion of nuxtApp.$img out to
avoid TypeError for the non-configurable getter created by
nuxtApp.provide('img', ...).

[codecov-commenter]

Codecov Report

❌ Patch coverage is 4.76190% with 20 lines in your changes missing coverage. Please review.
✅ Project coverage is 6.86%. Comparing base (67b40ac) to head (23744f4).

Files with missing lines	Patch %	Lines
src/runtime/image.ts	0.00%	14 Missing ⚠️
src/module.ts	0.00%	5 Missing ⚠️
src/runtime/components/NuxtPicture.vue	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##            main   #2127      +/-   ##
========================================
+ Coverage   6.83%   6.86%   +0.02%     
========================================
  Files         80      80              
  Lines       3729    3742      +13     
  Branches     142     142              
========================================
+ Hits         255     257       +2     
- Misses      3424    3435      +11     
  Partials      50      50              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.