fix(types): accept all configured providers in Img interface

[ispitsyn]

Summary

• The Img interface call signature uses ImageOptions without a generic parameter, defaulting to DefaultProvider ("ipx")
• This causes TS2322 when passing any non-default configured provider (e.g. "directus") to useImage() options
• Widen provider type in Img to keyof ConfiguredImageProviders so all configured providers are accepted

Reproduction

// nuxt.config.ts — directus provider is configured
image: {
  providers: {
    directus: { provider: 'directus', options: { baseURL: '...' } }
  }
}

// composable
const img = useImage();
img('id', {}, { provider: 'directus' });
//                         ^^^^^^^^^^
// TS2322: Type '"directus"' is not assignable to type '"ipx"'

Fix

Changed ImageOptions → ImageOptions<keyof ConfiguredImageProviders> in the Img interface (call signature, getImage, getSizes, getMeta).

Fixes #2174

🤖 Generated with Claude Code

[pkg-pr-new]

Open in StackBlitz

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

commit: bd30e51

[coderabbitai]

📝 Walkthrough

Walkthrough

Updated TypeScript typings for the image module so Img-related callables and methods use ImageOptions instead of a non-generic ImageOptions. The change ensures the provider option accepts any configured image provider. Additionally, a Cloudinary base URL was added to .nuxtrc and a test was added to verify non-default configured providers work with useImage().

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(types): accept all configured providers in Img interface' accurately summarizes the main change of narrowing the generic type parameter in Img methods to use keyof ConfiguredImageProviders instead of the default provider.
Description check	✅ Passed	The description provides a clear summary of the problem (TS2322 error when using non-default providers), the fix (changing ImageOptions to ImageOptions), and a reproduction example showing the issue.
Linked Issues check	✅ Passed	The pull request fully addresses issue #2174 by changing ImageOptions to ImageOptions in Img's call signature and related methods (getImage, getSizes, getMeta), allowing all configured providers to be accepted.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the Img interface types: narrowing generic parameters in src/types/image.ts, adding a Cloudinary configuration in .nuxtrc for testing, and adding test coverage for the fix in test/nuxt/use-image.test.ts.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 32.52%. Comparing base (5be826f) to head (824b9ba).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2175   +/-   ##
=======================================
  Coverage   32.52%   32.52%           
=======================================
  Files           7        7           
  Lines         372      372           
  Branches      131      131           
=======================================
  Hits          121      121           
  Misses        194      194           
  Partials       57       57           

☔ 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.

[coderabbitai]

🧹 Nitpick comments (1)

test/nuxt/use-image.test.ts (1)

58-59: Clarify test intent: runtime vs type-level error.

The comment says "should throw an error" but @ts-expect-error only suppresses the compile-time TypeScript error. The test doesn't actually assert that a runtime error is thrown (unlike the "Deny undefined provider" test on lines 16-21 which uses expect(...).toThrow(Error)).

If runtime validation is also expected, consider wrapping in an assertion:

💡 Suggested improvement

-    // `@ts-expect-error` this provider is not configured, so it should throw an error
-    img('/test.png', {}, { provider: 'unknown-provider' })
+    // `@ts-expect-error` this provider is not configured
+    expect(() => img('/test.png', {}, { provider: 'unknown-provider' })).toThrow(Error)

Alternatively, update the comment to clarify it's only testing the type-level rejection.

🤖 Prompt for AI Agents

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

In `@test/nuxt/use-image.test.ts` around lines 58 - 59, The test currently uses
`@ts-expect-error` but does not assert a runtime error for the call to
img('/test.png', {}, { provider: 'unknown-provider' }), so either make the
intent explicit: if you expect runtime validation to throw, wrap the call in an
assertion like expect(() => img('/test.png', {}, { provider: 'unknown-provider'
})).toThrow(Error) (mirror the "Deny undefined provider" test), or if you only
intend to test type-level rejection, update the inline comment to state "only
testing type-level rejection; no runtime assertion" so the test intent is clear;
locate the call to img in use-image.test.ts and change the assertion or comment
accordingly.

🤖 Prompt for all review comments with AI agents

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

Nitpick comments:
In `@test/nuxt/use-image.test.ts`:
- Around line 58-59: The test currently uses `@ts-expect-error` but does not
assert a runtime error for the call to img('/test.png', {}, { provider:
'unknown-provider' }), so either make the intent explicit: if you expect runtime
validation to throw, wrap the call in an assertion like expect(() =>
img('/test.png', {}, { provider: 'unknown-provider' })).toThrow(Error) (mirror
the "Deny undefined provider" test), or if you only intend to test type-level
rejection, update the inline comment to state "only testing type-level
rejection; no runtime assertion" so the test intent is clear; locate the call to
img in use-image.test.ts and change the assertion or comment accordingly.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9fb432b8-fbfc-4434-af81-309b5206a707

📥 Commits

Reviewing files that changed from the base of the PR and between 824b9ba and bd30e51.

📒 Files selected for processing (2)

• .nuxtrc
• test/nuxt/use-image.test.ts

✅ Files skipped from review due to trivial changes (1)

• .nuxtrc