Configuration - Nuxt Cloudinary

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
angle	number	`-`	`"45"`	Link
background	string	`-`	`"blue"`	Link
crop	string	`"limit"`	`"thumb"`	Link
enhance	boolean	`-`	`"true"`	Link
fillBackground (Beta)	`boolean/object`	`-`	`{{ gravity: 'east' }}`	Link
gravity	string	`auto`	`"faces"`	Link
loop	`boolean/number`	`-`	`true`	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
replaceBackground	`boolean/string/object`	`-`	`true/'fish tank'/{ prompt: 'fish tank', seed: 3 }`	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
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"`
namedTransformations	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"`

Usage

Examples