Vue.js SDK (BETA)

Overview

Cloudinary is a cloud-based service that provides an end-to-end image and video management solution including uploads, storage, manipulations, optimizations and delivery. All your media resources are optimized and delivered through a fast CDN using industry best practices.

Using Cloudinary's Vue.js SDK, you can easily perform smart image and video manipulations using code that integrates seamlessly with your existing Vue.js application, and deliver optimized and responsive media to your users.

Important
The Vue.js SDKis currently in BETA. There may be minor changes to parameter names or other implementation details before the general access release.

On this page:

Quick example

The following Cloudinary URL and corresponding Vue.js SDK code delivers the image below in an https delivery URL, including all of the following transformations:

  • Thumbnail crop to a size of 150x150 pixels using face detection gravity to automatically determine the location for the crop
  • Rounded corners with a 20 pixel radius
  • Sepia effect
  • Overlay of the Cloudinary logo on the southeast corner (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness, and partial transparency (opacity = 60%)
  • Rotated by 10 degrees
  • Converted to and delivered in PNG format (the originally uploaded image was a JPG)

URLVue.js
URL:
http://res.cloudinary.com/demo/image/upload/w_150,h_150,c_thumb,g_face,r_20,e_sepia/l_cloudinary_icon,g_south_east,x_5,y_5,w_50,o_60,e_brightness:200/a_10/front_face.png
Vue.js:
<cld-image publicId="front_face.png" secure="true">
  <cld-transformation width="150" height="150" gravity="face" radius="20" effect="sepia" crop="thumb" />
  <cld-transformation overlay="cloudinary_icon" gravity="south_east" x="5" y="5" width="50" opacity="60" effect="brightness:200" />
  <cld-transformation angle="10" />
</cld-image>
sample transformation in URL and Vue.js SDK

Vue.js SDK features

  • Build URLs for image and video transformation & manipulation
  • Helper components for embedding and transforming images, and more

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 or kebab-case. For example: CldImage or cld-image
  • Pass parameter data as: Object

Installation and Setup

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:

npm install cloudinary-vue

2. Include the required components of the cloudinary-vue library in your code

The following 4 components are available:

import {CldContext, CldImage, CldVideo, CldTransformation} from 'cloudinary-vue';
  • 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.
  • CldTransformation - allows you to define additional transformations on the parent component.

3. Set Cloudinary configuration parameters.

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.

You can apply these settings 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:
import Cloudinary from 'cloudinary-vue';
Vue.use(Cloudinary, {
  configuration: {
    cloudName: "demo"
  }
});
  • Directly in the component:
<cld-image cloudName="demo" publicId="sample" width="300" crop="scale" />
  • Configuration with cld-context applies to all child components:
<cld-context cloudName="demo">
  <div>
    <cld-image publicId="sample" width="50" />
  </div>
  <cld-image publicId="sample" width="0.5" />
</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');}
}

Related topics