Nuxt Image integration with Sirv media management, transformation and delivery platform.

Integration between Sirv and Nuxt image.

To use Sirv provider, you need to set up your Sirv URL as the baseURL in the Nuxt Image module configuration, like this:

export default defineNuxtConfig({
  image: {
    sirv: {
      baseURL: '' 

Get your alias from your Sirv account details page or set up a custom domain (instructions).

Sirv fit parameters

By default, Sirv will scale the image, preserving its aspect ratio, to fit within the smallest dimension. Here's the map of standard values for the fit property and how they're going to be interpreted by Sirv:

  • fill: ignore
  • inside: fill
  • outside: fill
  • noUpscaling: noup, this is the default option for Sirv image provider, so you don't need to specify it explicitly.


If no format is specified, Sirv will deliver your images in the optimal format by default. Alternatively, you can specify a custom format for the image like this:


Sirv modifiers

To use Sirv-specific transformations, add them in the modifier prop.


Use Sirv profiles to combine multiple transformation options into a single parameter. For example, you can combine canvas, crop and watermark parameters into a single profile and use it like this:

    :modifiers="{profile: 'my-profile'}


Use the canvas modifier to add a canvas around your image. You can also set its width, height, color, and position.


Sharpen the image using the sharpen modifier.

  :modifiers="{sharpen: 50}"


Add a frame/border to your images using the frame modifier. You can also set its width and color.

    frameStyle: 'solid',
    frameColor: '00000',
    frameWidth: '2',
    frameRimColor: '97A6B1',
    frameRimWidth: '2'


Use the rotate modifier to rotate your image. You can specify the number of degrees to rotate the image by.

  :modifiers="{rotate: 90}"

Color and light options

Sirv has various color manipulation options like grayscale, colorize,colortone,colorLevels, as well as light manipulation options like lightness, hue, saturation, highlights, shadows, brightness, exposure, contrast.

Here's how to convert an image to grayscale:

  :modifiers="{grayscale: true}"

Watermarks and text overlays

Using Sirv's Nuxt Image integration, you can overlay images or text over other images for watermarking or creating a dynamic banner using custom text!


Add an image overlay over your existing image using the watermark modifier. Used mostly for watermarking, but can be useful for creating banners, OG images, and personalization. Here's an example of a single watermark:

<NuxtImg provider="sirv" 
    watermark: '/watermark-v1.png',
    watermarkPosition: 'center',
    watermarkWidth: '30%',

Find out more about Sirv watermarks here.

Overlay Text

You can add text overlays to your images and have full freedom over their positioning and looks.

<NuxtImg provider="sirv" 
  src="example-image.jpg" width="300"
    text: 'Hello there',
    textAlign: 'center',
    textPositionGravity: 'south',
    textBackgroundColor: '#ffff',
    textSize: 60,
    textFontFamily: 'Arial',
    textColor: 'white',

More examples of text overlays can be found here.

List of supported transformations

Sirv's Nuxt Image integration uses intuitive names for each transformation. If you use a property that does not match any of the following supported options, it will be added in the URL as it is.

Supported Parameter NameTranslates to ParameterDescription
widthwWidth of image.
heighthHeight of image.
ssResize the image by its biggest side
qualityqJPEG image quality (percentage).
fitscale.optionImage scaling options.
profileprofileApply a Sirv profile
formatformatImage format served (defaults to optimal).
webpFallbackwebp-fallbackImage format for browsers without WebP support.
subsamplingsubsamplingChroma subsampling to reduce JPEG file size.
gifCompressiongif.lossyApply lossy compression, to reduce GIF file size.
cropcrop.typeAutomatically crop to edge of image contents; point of interest; or face.
cropArcrop.aspectratioAspect ratio of the crop
cwcwCrop the image to a specific width.
chchCrop the image to a specific height.
cxcxPosition to start image crop (from top).
cycyPosition to start image crop (from left).
cropPaddingXcrop.pad.xAdd padding to left/right of crop area
cropPaddingYcrop.pad.yAdd padding to top/bottom of crop area.
canvasHeightcanvas.heightCreate a canvas around the image (height).
canvasWidthcanvas.widthCreate a canvas around the image (width).
canvasArcanvas.aspectratioAspect ratio of the canvas from 1-99 e.g. 16:9
canvasPositioncanvas.positionPosition of the canvas behind the image.
canvasBorderWidthcanvas.border.widthAdds additional width left and right of the canvas.
canvasBorderHeightcanvas.border.heightAdds additional height above and below the canvas.
canvasBorderColorcanvas.border.colorColor of the canvas border e.g. E0AA80 or red.
canvasBorderOpacitycanvas.border.opacityOpacity of the canvas border.
watermarkwatermarkFilepath of the image to be overlayed.
watermarkPositionwatermark.positionPosition of the watermark on the image.
watermarkPositionGravitywatermark.position.gravitysets the starting point for shifting the x & y values.
watermarkPositionXwatermark.position.xPosition of the watermark (from left).
watermarkPositionYwatermark.position.yPosition of the watermark (from top).
watermarkWidthwatermark.scale.widthWidth of watermark.
watermarkHeightwatermark.scale.heightHeight of watermark.
texttextDisplay text on your image.
textBase64text.text64Alternative to text parameter, with Base64 encoding
textSizetext.sizeWidth of text area in relation to image.
textAligntext.alignAlign the multiline text.
textPositiontext.positionLocation of the text on the image.
textPositionXtext.position.xLocation of the text (from left).
textPositionYtext.position.yLocation of the text (from top).
textPositionGravitytext.position.gravityMaster location of the text on the image.
textFontSizetext.font.sizeFix the size of the text in px.
textFontStyletext.font.styleStyle of the text.
textFontFamilytext.font.familyChoose a font e.g. "Open Sans".
textFontWeighttext.font.weightChoose font weight (light, normal, semi-bold, bold, extra-bold).
textColortext.colorText color e.g. E0AA80 or E0AA8020.
textOpacitytext.opacityText opacity.
textOutlineWidthtext.outline.widthAdd an outline around the text.
textoutlineColortext.outline.colorColor of the text outline.
textOutlineOpacitytext.outline.opacityOpacity of the text outline.
textOutlineBlurtext.outline.blurBlur the edge of the text outline.
textBackgroundColortext.background.colorBackground color e.g. E0AA80 or E0AA8020.
textBackgroundOpacitytext.background.opacityBackground opacity.
sharpensharpenSharpen the image.
blurblurBlur the image.
grayscalegrayscaleMake the image black & white.
colorizecolorizeOverlay a color on the image.
colorizeColorcolorize.colorThe color of the colorize option.
colorizeOpacitycolorize.opacityOpacity of the color overlay.
colortonecolortoneChange the color tone of the image.
colortoneColorcolortone.colorApply a color tone to an image.
colortoneLevelcolortone.levelSet the level of blending with the original image.
colortoneModecolortone.modeApply the color tone to the entire image or shadows/highlights only.
vignettevigette.valueAdjust the depth of the vignette.
vignetteColorvigette.colorAdd a vignette (dark edges) around the image.
lightnesslightnessChange the lightness of the image.
colorlevelBlackcolorlevel.blackAdjust black level of image.
colorlevelWhitecolorlevel.whiteAdjust white level of image.
histogramhistogramDisplay a histogram of RGB levels.
huehueChange the hue of the image.
saturationsaturationChange the saturation of the image.
highlightshighlightsChange the highlights of the image.
shadowsshadowsChange the shadows of the image.
brightnessbrightnessChange the brightness of the image.
exposureexposureChange the exposure of the image.
contrastcontrastChange the contrast of the image.
rotaterotateNumber of degrees to rotate the image.
flipflipFlip image vertically (mirror).
flopflopFlip image horizontally (mirror).
opacityopacityOpacity of PNG images.
frameStyleframe.styleAdd a frame around the image.
frameColorframe.colorFrame color e.g. E0AA80 or E0AA8020.
frameWidthframe.widthFrame width.
frameRimColorframe.rim.colorFrame rim color e.g. E0AA80 or E0AA8020.
frameRimWidthframe.rim.widthFrame rim width.
pdfPagepagePage number of PDF when converted to image.

Learn more about Sirv's Image transformations from the official documentation.