@teamnovu/vue-cloudinary-image

Simple Cloudinary Image component for vue
2,640
Install
npm install @teamnovu/vue-cloudinary-image
Latest Version:4.0.1
Vue:3
Older releases:2
License:MIT
Last Updated:Aug 5, 2026
Links: GitHub  ·  npm
Maintainer: strebl

Vue-Cloudinary-Image

Responsive image component

Uses the image attributes srcSet and sizes to responsively display an an image from cloudinary.

Generates srcSet with a placeholder for lazyloading based on screen sizes passed in options and adjusts the sizes attribute depending on the screen size.

Installation

// yarn
yarn add @teamnovu/vue-cloudinary-image

// npm
npm i @teamnovu/vue-cloudinary-image

For vue2 use a version < v3.0.0

Setup

import CloudinaryImage from '@teamnovu/vue-cloudinary-image'

Vue.use(CloudinaryImage, {
  cloudinaryBaseUrl: "https://res.cloudinary.com/<your-cloud-name>/image/upload/",
});

Usage

<CloudinaryImage src="/assets/image.jpg" />

Plugin Options

Option Default Required Type Comment
cloudinaryBaseUrl null true String
screenSizes default screen sizes false Object
placeholderTransformation null false String Named Transformation used for the placeholder transformation

Attributes

Attribute Default Required Type Description
src null true String Relative path to image from cloudinaryAssetUrl
quality 85 false Number Cloudinary Option
blur null false Number Cloudinary Option
crop null false String Cloudinary Option
format 'auto' false String Cloudinary Option
fallbackWidth null false Number If srcSet and sizes are not supported in the clients browser, this will be the fixed width of the image itself (not css width)
aspectRatio null false Number If you set this attribute the component will ignore the placeholderDataUrl attribute and load the placeholder image from cloudinary because the aspect ratio would change between placeholder and the real image
placeholderDataUrl null false String If this attribute is set all other placeholder options are ignored and this url is used as the placeholder source
placeholderQuality 30 false Number Cloudinary Option
placeholderWidth 300 false Number Cloudinary Option
usePlaceholder true false Boolean If this attribute is set to false, no placeholder will be displayed and the original image will be rendered immediately
zoom undefined false String, Number Zoom level
sizes undefined false String Fixed sizes attribute for img tag
transforms undefined false String, Object Additional, raw transformations
loading 'lazy' false String Image loading property. Use loading="eager" to load the image immediately

Example

<CloudinaryImage
  src="/assets/image.jpg"
/>

Related Packages

@teamnovu/kit-vue-forms
13,698
forms typescript validation vue
@teamnovu/kit-composables

A collection of composables

5,342 2
composable vue vue3
@teamnovu/vue-cloudinary-image-statamic

Statamic Adapter for @teamnovu/vue-cloudinary-image and @teamnovu/nuxt-cloudinar...

4,843 0
@teamnovu/kit-components

A collection of vue(3) components for jkweb

3,752 2
components vue vue3
@teamnovu/nuxt-image-module

Responsive image module for Nuxt 4 with provider-agnostic focal-point handling a...

1,124
bunny cloudinary image imgproxy nuxt nuxt-module responsive-images statamic

Version History

Version Released License
4.0.1 MIT
4.0.0 MIT
3.0.4 MIT
3.0.3 MIT
3.0.2 MIT
Pre-releases (6)
Version Released License
5.0.0-beta.1 MIT
3.0.2-dev.5 MIT
3.0.2-dev.4 MIT
3.0.2-dev.3 MIT
3.0.2-dev.2 MIT