Vue.js SDK
Overview
Cloudinary's Vue.js SDK provides simple, yet comprehensive image and video upload, transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing Vue.js application.
For details on all new features and fixes from previous versions, see the CHANGELOG.
Quick example
Take a look at the following transformation code and the image it delivers:
<cld-image publicId="front_face.png" secure="true"> <cld-transformation width="150" height="150" gravity="face" crop="thumb" /> <cld-transformation radius="20" /> <cld-transformation effect="sepia" /> <cld-transformation overlay="cloudinary_icon_blue" gravity="south_east" x="5" y="5" width="50" opacity="60" effect="brightness:200" /> <cld-transformation angle="10" /> </cld-image>

This relatively simple code performs all of the following on the original front_face.jpg image before delivering it:
- Crop to a 150x150 thumbnail using face-detection gravity to automatically determine the location for the crop
- Round the corners with a 20 pixel radius
- Apply a sepia effect
- Overlay the Cloudinary logo on the southeast corner of the image (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness and partial transparency (opacity = 60%)
- Rotate the resulting image (including the overlay) by 10 degrees
- Convert and deliver the image in PNG format (the originally uploaded image was a JPG)
And here's the URL that would be included in the image tag that's automatically generated from the above code:
In a similar way, you can transform a video.
Vue.js SDK features
- Build URLs for image and video transformation & manipulation
- Helper components for embedding and transforming images, and more
Installation and Setup
The Vue.js SDK is available as open source at https://github.com/cloudinary/cloudinary-vue. There is also a tool for integrating Cloudinary into your Vue.js project at https://github.com/cloudinary/vue-cli-plugin-cloudinary.
1. Install the Vue.js SDK
The Cloudinary Vue.js SDK serves as a layer on top of Cloudinary's JavaScript (cloudinary-core) library. Install the SDK by running the following command:
2. Set Cloudinary configuration
To use the Cloudinary Vue.js components, you must configure at least your Cloudinary account cloudName
. You can additionally define a number of optional configuration parameters if relevant. You can find your account-specific configuration credentials in the dashboard of our Management Console.
The following 5 Cloudinary Vue.js components are available:
- CldContext - allows you to define shared parameters that are applied to all child components.
- CldImage - defines a Cloudinary Image tag.
- CldVideo - defines a Cloudinary Video tag.
- CldPoster - allows you to specify an image resource for a CldVideo parent component, to be used as the
poster
attribute of the generatedvideo
tag. - CldTransformation - allows you to define additional transformations for a parent component (CldImage, CldVideo or CldPoster).
You can apply these options globally on the app level, directly to each component, or you can apply them to all child components using a CldContext
component.
For example:
- Globally on the app level, you can use one of the following options:
// all Cloudinary components: import Cloudinary from "cloudinary-vue"; Vue.use(Cloudinary, { configuration: { cloudName: "demo" } }); // specify which components to install: import Cloudinary, { CldImage } from "cloudinary-vue"; Vue.use(Cloudinary, { configuration: { cloudName: "demo" }, components: [ "CldImage" ] }); // define them in object of components, and rename any component if needed: import Cloudinary, { CldImage, CldTransformation } from "cloudinary-vue"; Vue.use(Cloudinary, { configuration: { cloudName: "demo" }, components: { CldImage: true, CldTransformation: "CldXf" //^ a custom name } });
- Directly in the component:
- Configuration with
cld-context
applies to all child components:
<cld-context cloudName="demo"> <div> <cld-image publicId="sample" width="50" crop="scale" /> </div> <cld-image publicId="sample" width="0.5" crop="scale" /> </cld-context>
Using core Cloudinary JavaScript features
The Cloudinary JavaScript library is the foundation library underlying Cloudinary's Vue.js SDK. You can access any of the core JavaScript functionality within your Vue.js code after importing the core library. For example:
import {Cloudinary} from 'cloudinary-core'; const cloudinaryCore = new cloudinary.Cloudinary({cloud_name: 'demo'}); //... computed: { cloudinarySrc() {return cloudinaryCore.url('sample');} }
Vue.js capitalization and data type guidelines
When using the Vue.js SDK, keep these guidelines in mind:
- Parameter names:
camelCase
. For example: publicId - Define Components:
PascalCase
. For example: CldImage - Use Components:
PascalCase
orkebab-case
. For example: CldImage or cld-image - Pass parameter data as:
Object