Configuration

The CldImage component provides a wide range of options for being able to easily optimize and transform images.

Configuration for CldImage is the same as useCldImageUrl, which both use the same underlying API.

Required Props

The basic props required to use CldImage include:

Prop	Type	Required	Example
alt	string	Yes	Dog catching a frisbee
height	number/string	Yes	600
src	string	Yes	my-public-id
width	number/string	Yes	600

Unpic props

CldImage extends the Upnic Image component using Cloudinary tech. This means all props available on the Upic component are available on CldImage. Learn more on the Unpic docs

Basic Transformations

The CldImage component exposes many of Cloudinary's transformations in an easy-to-use way right inside of Nuxt.

Prop	Type	Default	Example	More
crop	string	"limit"	"thumb"	Link
background	string	-	"blue"	Link
fillBackground (Beta)	boolean/object	-	{{ gravity: 'east' }}	Link
gravity	string	auto	"faces"	Link
recolor	array/object	-	['duck', 'blue']	Link
remove	string/array/object	-	apple	Link
removeBackground	boolean/string	false	true	Link
replace	array/object	-	['apple', 'banana']	Link
restore	boolean	-	true	Link
zoom	string	-	0.5	Link
zoompan	boolean/string/object	-	true	Link

General Props

Following props can be passed to the CldImage component to make it work in more advanced scenarios.

Prop Name	Type	Default	Example
crop	string	"limit"	"thumb"
deliveryType	string	"upload"	"fetch"
effects	array	-	[{ background: 'blue' }]
format	string	"auto"	"webp"
gravity	string	"auto"	"faces"
height	number/string	-	600
overlays	array	-	See Below
preserveTransformations	string	false	true
quality	string	"auto"	"90"
rawTransformations	array	-	['e_blur:2000']
removeBackground	bool/string	false	true
sanitize	bool	true if svg	true (Applies only to SVG)
seoSuffix	string	-	my-image-content
src	string	-	"my-public-id"
text	string	-	"Nuxt Cloudinary"
transformations	string/array	-	['my-named-transformation']
underlay	string	-	"my-public-id"
underlays	array	-	See Below
version	number	-	1234
width	number/string	-	600
zoom	string	-	0.5
zoompan	bool/string/object	-	See Below
fillBackground	bool/object	-	true

Filters & Effects

All effect props are disabled by default.

Prop Name	Type	Example	More
art	string	"al_dente"	Link
autoBrightness	bool/string	true, "80"	Link
autoColor	bool/string	true, "80"	Link
autoContrast	bool/string	true, "80"	Link
assistColorblind	bool/string	true, "20", "xray"	Link
blackwhite	bool/string	true, "40"	Link
blur	bool/string	true, "800"	Link
blurFaces	bool/string	true, "800"	Link
blurRegion	bool/string	true, "1000,h_425,w_550,x_600,y_400"	Link
border	string	"5px_solid_purple"	-
brightness	bool/string	true, "100"	Link
brightnessHSB	bool/string	true, "100"	Link
cartoonify	bool/string	true, "70:80"	Link
color	string	"blue"	-
colorize	string	"35,co_darkviolet"	Link
contrast	bool/string	true, "100", "level_-70"	Link
distort	string	"150:340:1500:10:1500:1550:50:1000", "arc:180.0"	Link
fillLight	bool/string	true, "70:20"	Link
gamma	bool/string	true, "100"	Link
gradientFade	bool/string	true, "symmetric:10,x_0.2,y_0.4"	Link
grayscale	bool	true	Link
improve	bool/string	true, "50", "indoor"	Link
multiply	bool	true	Link
negate	bool	true	Link
oilPaint	bool/string	true, "40"	Link
opacity	number/string	40, "40"	Link
outline	bool/string	true, "40", "outer:15:200"	Link
overlay	bool	true	Link
pixelate	bool/string	true, "20"	Link
pixelateFaces	bool/string	true, "20"	Link
pixelateRegion	bool/string	true, "35,h_425,w_550,x_600,y_400"	Link
redeye	bool/string	true	Link
replaceColor	string	"saddlebrown", "2F4F4F:20", "silver:55:89b8ed"	Link
sanitize	bool/	true, "70"	Link
saturation	bool/string	true, "70"	Link
screen	bool	true	Link
sepia	bool/string	true, "50"	Link
shadow	bool/string	true, "50,x_-15,y_15"	Link
sharpen	bool/string	true, "100"	Link
shear	string	"20.0:0.0"	Link
simulateColorblind	bool/string	"deuteranopia"	Link
tint	bool/string	true, "100:red:blue:yellow"	Link
trim	bool/string	true, "50:yellow"	Link
unsharpMask	bool/string	true, "500"	Link
vectorize	bool/string	true, "3:0.5"	Link
vibrance	bool/string	true, "70"	Link
vignette	bool/string	true, "30"	Link

View the Cloudinary docs to see learn more about using effects.

Overlays & Underlays

The overlays prop is an array of objects with the following configuration options:

Property Name	Type	Example
appliedEffects	array	Same as effects, added as applied transformation
effects	array	See Below
position	object	See Below
publicId	string	"thumb"
text	object/string	"Nuxt Cloudinary" or See Below
url	string	"https://.../image.jpg"

The position property can include:

Property Name	Type	Example
angle	number	45
gravity	string	'"north_west"'
x	number	10
y	number	10

Objects in the effects array can include everything in the effects options above as well as:

Property Name	Type	Example
aspectRatio	string	"3.0"
crop	string	10
gravity	string	'"north_west"'
height	number	'600'
width	number	'600'

The text property can include:

Property Name	Type	Example
border	string	"20px_solid_blue"
color	string	"blueviolet"
fontFamily	string	"Open Sans"
fontSize	number	48
fontWeight	string	"bold"
letterSpacing	number	"14"
lineSpacing	number	"14"
stroke	bool	true in coordination with Border
textDecoration	string	"underline"