-
Notifications
You must be signed in to change notification settings - Fork 321
Open
Description
Environment
- @nuxt/image: v2.0.0
- Nuxt: 4.x
- TypeScript: strict mode
Description
The Img interface's call signature hardcodes ImageOptions without a generic parameter, which defaults to DefaultProvider (resolved from ProviderDefaults['provider']). This means the provider field in the options argument only accepts the default provider (e.g. "ipx"), even when other providers are properly configured.
Generated types (.nuxt/image/providers.d.ts):
interface ProviderDefaults {
provider: "ipx"
}
interface ConfiguredImageProviders {
"directus": ImageProviders["directus"]
"ipx": ImageProviders["ipx"]
}Img interface (module.d.ts):
type DefaultProvider = ProviderDefaults extends Record<'provider', unknown> ? ProviderDefaults['provider'] : never;
interface ImageOptions<Provider extends keyof ConfiguredImageProviders = DefaultProvider> {
provider?: Provider; // defaults to "ipx"
}
interface Img {
(source: string, modifiers?: ImageOptions['modifiers'], options?: ImageOptions): ResolvedImage['url'];
// ^^^^^^^^^^^^
// ImageOptions without generic = ImageOptions<"ipx">, so provider?: "ipx"
}Reproduction
Configure a non-default provider (e.g. directus) in nuxt.config.ts:
// nuxt.config.ts
export default defineNuxtConfig({
image: {
providers: {
directus: {
provider: 'directus',
options: {
baseURL: 'https://example.com/assets/',
},
},
},
},
})Then use useImage() with that provider:
const img = useImage();
const url = img('some-id', {}, { provider: 'directus' });
// ^^^^^^^^^^
// TS2322: Type '"directus"' is not assignable to type '"ipx"'Expected behavior
The provider option in Img's call signature should accept any key from ConfiguredImageProviders, not just the default provider.
Suggested fix
Make the Img interface generic or widen the provider type to accept all configured providers:
interface Img {
(source: string, modifiers?: ImageOptions['modifiers'], options?: ImageOptions<keyof ConfiguredImageProviders>): ResolvedImage['url'];
}Workaround
import type { ImageOptions } from '@nuxt/image';
const directusOptions = { provider: 'directus' } as unknown as ImageOptions;
const url = img('some-id', {}, directusOptions);Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels