Skip to content

feat: allow to modify provider options within props #2101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
huang-julien wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: allow to modify provider options within props #2101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c099ed2
feat: allow to modify provider options within props
huang-julien Jan 31, 2026
cb564ef
fix: type
huang-julien Jan 31, 2026
54df2c4
fix: apply suggestion
huang-julien Jan 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/runtime/utils/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ export interface BaseImageProps<Provider extends keyof ConfiguredImageProviders>
preset?: string
provider?: Provider

options?: ConfiguredImageProviders[Provider]

Comment on lines +23 to +24
Copy link

@coderabbitai coderabbitai bot Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, let's read the file to understand the full context
cat -n src/runtime/utils/props.ts

Repository: nuxt/image

Length of output: 2435

🏁 Script executed:

# Search for ConfiguredImageProviders definition and augmentation patterns
rg -n 'ConfiguredImageProviders' --type=ts -B 2 -A 5 | head -100

Repository: nuxt/image

Length of output: 5532

🏁 Script executed:

# Search for how providers augment ConfiguredImageProviders
rg -n 'declare module.*ConfiguredImageProviders' --type=ts -A 5 | head -50

Repository: nuxt/image

Length of output: 36

🏁 Script executed:

# Look for provider implementations to understand ConfiguredImageProviders structure
find src -name "*.ts" -type f | xargs grep -l "ImageProviders\|ConfiguredImageProviders" | head -10

Repository: nuxt/image

Length of output: 185

🏁 Script executed:

# Check index.d.ts
cat -n src/index.d.ts

echo "---"

# Look for provider directories with examples
ls -la src/providers/ 2>/dev/null | head -20

Repository: nuxt/image

Length of output: 735

🏁 Script executed:

# Check the ipx provider to understand the options structure
cat -n src/runtime/providers/ipx.ts | head -80

Repository: nuxt/image

Length of output: 3066

🏁 Script executed:

# Search for useImageProps usage
rg -n 'useImageProps' --type=ts -B 2 -A 5 | head -80

Repository: nuxt/image

Length of output: 540

🏁 Script executed:

# Search for imports and usages of useImageProps
rg -n 'import.*useImageProps' --type=ts -B 2 -A 5

Repository: nuxt/image

Length of output: 36

🏁 Script executed:

# Check what's exported from props.ts
rg -n 'export' src/runtime/utils/props.ts

echo "---"

# Look for test files that might show usage
find . -name "*.test.*" -o -name "*.spec.*" | grep -i props | head -10

Repository: nuxt/image

Length of output: 262

🏁 Script executed:

# Look for any component or test files that use BaseImageProps
find . -type f \( -name "*.vue" -o -name "*.test.ts" -o -name "*.spec.ts" \) -exec grep -l "BaseImageProps\|useImageProps" {} \;

Repository: nuxt/image

Length of output: 131

🏁 Script executed:

# Check how NuxtImg.vue uses BaseImageProps and options
cat -n src/runtime/components/NuxtImg.vue | head -150

Repository: nuxt/image

Length of output: 5317

🏁 Script executed:

# Look at the getSizes method signature
rg -n 'getSizes' src/runtime/image.ts -A 10 | head -60

Repository: nuxt/image

Length of output: 2400

🏁 Script executed:

# Check the $img function signature - what does it expect as the third parameter?
rg -n 'function.*\$img|export.*\$img' src/runtime/image.ts -A 5 | head -40

Repository: nuxt/image

Length of output: 36

🏁 Script executed:

# Look at the createImage function and its return value
cat -n src/runtime/image.ts | sed -n '8,110p'

Repository: nuxt/image

Length of output: 4065

🏁 Script executed:

# Look at resolveImage to see which options are actually used
cat -n src/runtime/image.ts | sed -n '52,107p'

Repository: nuxt/image

Length of output: 2225

🏁 Script executed:

# Let's check the ImageOptions interface more carefully to see what properties it expects
cat -n src/types/image.ts | sed -n '20,35p'

Repository: nuxt/image

Length of output: 1029

Verify the type and fix the spread order for options.

The type ConfiguredImageProviders[Provider] represents the entire provider configuration, but ImageOptions expects only specific properties (provider, preset, densities, modifiers, sizes). Using the full provider config as the type is too broad.

Additionally, at line 44, spreading props.options after explicitly setting provider and preset is backwards—if props.options contains these keys, they override the explicit props. The spread should come first, or better, the options type should be narrowed to only the expected runtime options.

🤖 Prompt for AI Agents 
In `@src/runtime/utils/props.ts` around lines 23 - 24, The type for options is too
broad and the spread order is reversed: change the type of props.options from
ConfiguredImageProviders[Provider] to the narrower ImageOptions (or create a
dedicated RuntimeImageOptions type containing only provider, preset, densities,
modifiers, sizes) so it matches what ImageOptions expects, and update the object
construction so you spread props.options first and then explicitly set provider
and preset (or keep explicit values last) to ensure explicit props cannot be
overridden by props.options; reference the symbols options,
ConfiguredImageProviders, ImageOptions, props.options, provider, preset,
densities, modifiers, sizes in your change.

sizes?: string | Record<string, any>
densities?: string
preload?: boolean | { fetchPriority: 'auto' | 'high' | 'low' }
Expand All @@ -37,6 +39,7 @@ export const useImageProps = <Provider extends keyof ConfiguredImageProviders>(p
const $img = useImage()

const providerOptions = computed(() => ({
...props.options,
provider: props.provider,
preset: props.preset,
}))
Expand Down
2 changes: 1 addition & 1 deletion src/types/image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export interface ImageModifiers {
format: string
quality: string | number
background: string
blur: number
blur: number | string
}

export interface ResolvedImageModifiers extends ImageModifiers {
Expand Down
Loading