Cloudinary Vue SDK

The Cloudinary Vue SDK is an open-source component library from Cloudinary that gives Vue.js apps a declarative way to optimize, transform, and deliver images and videos through Cloudinary's CDN. It ships as a set of Vue components, including CldImage, CldVideo, CldTransformation, and CldContext, which wrap Cloudinary's transformation API.

What is the Cloudinary Vue SDK?

The Cloudinary Vue SDK integrates the Cloudinary media delivery platform into Vue.js applications through reusable components. It accepts a Cloudinary cloud name and a public ID for an asset, then generates the corresponding image or video HTML tag with any requested transformations applied. The SDK currently targets Vue 2 only, as stated in the version support table: versions 1.0.0 through 1.2.3 work with Vue 2 and not Vue 3.

Key Features

• Declarative transformations — Apply cropping, scaling, rotation, effects, and overlays by nesting CldTransformation components inside CldImage or CldVideo, using the same transformation syntax as Cloudinary's URL API.
• Image tag generation — The CldImage component renders an image tag with optimized URLs, with the publicId and cloudName configured via a parent CldContext.
• Video tag generation — The CldVideo component outputs video tags with transformations, covering delivery and manipulation use cases.
• Chainable operations — Multiple CldTransformation children can be composed to create multiple transformation steps in a single tag.
• Vue CLI plugin — Installing with vue add cloudinary adds a CLI plugin that configures your cloud name, lets you choose which components to include, and generates a cloudinary.js file alongside main.js for customization.
• Nuxt.js module — For Nuxt projects, the separate @nuxtjs/cloudinary package provides similar integration.
• Manual component registration — Components can be imported individually into each Vue file, or registered globally with Vue.use(Cloudinary) by passing a configuration object that includes your cloud name.
• MIT licensed — The SDK is released under the MIT license, so it can be freely used in commercial projects.

Who is it for?

The Cloudinary Vue SDK is aimed at Vue developers who want to serve media from Cloudinary without hand-crafting URLs. It suits front-end engineers building Vue 2 applications who need responsive images and video, teams already using Cloudinary who want a consistent component interface, and developers using Vue CLI or Nuxt who want one-command setup.

What can you do with the Cloudinary Vue SDK?

• E-commerce developers: Display product photos in multiple crops and sizes by adjusting the width, crop, and angle properties on a CldImage, letting one source asset serve many contexts.
• Content editors: Use the SDK to deliver video and images with automatic optimization so viewers see appropriately compressed files based on their device.
• Nuxt site builders: Add the @nuxtjs/cloudinary module to a Nuxt project to get the same transformations inside a server-side rendered Vue application.

How does the Cloudinary Vue SDK work?

Installation begins either with the Vue CLI command vue add cloudinary or a package manager install of cloudinary-vue. After setup, you supply your cloudName either globally through a configuration object passed to Vue.use(Cloudinary), or locally using a CldContext component. Then place CldImage or CldVideo components with a publicId, and optionally nest CldTransformation components to apply one or more transformation steps. The SDK does not provide file upload; for uploads, Cloudinary offers several client-side methods documented separately.

FAQ

Does the Cloudinary Vue SDK support Vue 3?

No. As of the versions listed in this README (1.0.0 through 1.2.3), the SDK supports Vue 2 only. Vue 3 projects should look for a separate integration or check Cloudinary's current Vue documentation.

What does the cld-transformation component do?

The CldTransformation component lets you specify a single transformation operation, such as crop='scale', width='200', or angle='10'. You can place multiple CldTransformation components in sequence to chain operations like rotation, trimming, and overlays.

Can I upload files with this SDK?

No. The README explicitly states that the SDK does not provide file upload functionality. Uploading from the client side is covered in Cloudinary's separate documentation on image and video upload.

Is the Cloudinary Vue SDK free to use?

The SDK itself is open source under the MIT license, so there are no licensing fees. Cloudinary's service has its own pricing, but that is not covered in this README.