Power up file uploading, processing and delivery for your app in one sitting.

Integration between Uploadcare and the Nuxt Image module.


To use images from uploadcare, specify the provider as uploadcare and set the image src to the UUID provided on the dashboard.

<NuxtImg  provider="uploadcare"  src="c160afba-8b42-45a9-a46a-d393248b0072"  alt="My image from uploadcare"/>


To see all possible modifiers and their options, check out the image transformations documentation or the URL API Reference.

Types are provided for the following modifiers:

  // Image Compression  format: 'jpeg' | 'png' | 'webp' | 'auto'  quality: 'smart' | 'smart_retina' | 'normal' | 'better' | 'best' | 'lighter' | 'lightest'  progressive: 'yes' | 'no'  strip_meta: 'all' | 'none' | 'sensitive'  // Image Geometry  preview: `${number}x${number}` // Height x Width  resize: `${number}x${number}` | `${number}x`| `x${number}`   smart_resize: `${number}x${number}`  crop: string | string[]  scale_crop: string | string[]  border_radius: string | string[]  setfill: string // 3, 6 or 8 digit hex color  zoom_objects: string // 1 to 100

Please feel free to open a PR to improve support for additional operations.


By default, all file URLs use the domain. By setting a custom CDN CNAME, file URLs can use instead.

See the Uploadcare documentation for how to enable a custom domain in your project. To tell Nuxt Image about the custom CDN name, use the following configuration:

export default defineNuxtConfig({  image: {    uploadcare: {      cdnURL: '',    }  }})