Vue Components

This module uses the official Vue components built for Cloudinary and registers the following components for use in the application.

Each of the components below is embedded with delivery URL building mechanism of Cloudinary.

Media components

CldImage

Props:

• publicId:
  • required
  • Type: String
• All other Cloudinary configuration options and transformations such as width, crop for cropping type, radius for border radius, etc.

Outputs a <img> element with src is the generated delivery URL from Cloudinary.

<cld-image
  public-id="my-pic-id"
  width="200"
  crop="scale"
  radius="max"
  fetchFormat="auto"
  quality="auto"
  loading="lazy"
/>

Result will be:

<img src="https://res.cloudinary.com/my_cloud/image/upload/w_200,c_scale,r_max,f_auto,q_auto/my-pic-id" />

Any non-Cloudinary standard attributes are treated as normal HTML attributes. If publicId is an external URL and there is no type='fetch' attribute, the component just returns a normal <img> element with all attributes as HTML attributes.

You can refer more details on a full list of image transformation options

CldVideo

Props:

• publicId:
  • required
  • Type: String
• All other Cloudinary configuration options and transformations such as width, overlay, quality for resolution etc.

Outputs a <video> component including multiple <source> with generated URL sources for the main formats supported by browsers (webm, mp4, ogv) and a poster thumnail image.

<cld-video
  public-id="my-video-id"
  width="500"
  crop="scale"
  quality="auto"
  overlay="text:arial_60:watchme"
/>

Result will look like:

<video>
  <source src="https://res.cloudinary.com/my_cloud/video/upload/w_500,q_auto,c_scale,l_text:arial_60:watchme/my-video-id.webm" type="video/webm">
  <source src="https://res.cloudinary.com/my_cloud/video/upload/w_500,q_auto,c_scale,l_text:arial_60:watchme/my-video-id.mp4" type="video/mp4">
  <source src="https://res.cloudinary.com/my_cloud/video/upload/w_500,q_auto,c_scale,l_text:arial_60:watchme/my-video-id.ogv" type="video/ogg">
</video>

Any non-Cloudinary standard attributes are treated as normal HTML attributes.

You can refer more details on a full list of video transformation options

Supportive components

CldPlaceholder

Props:

• type:
  • Type: String
  • Default: blur
  • Accepted values: blur, vectorize, pixelate, predominant-color

Provides a fast and lightweight image version of a target image (defined in its parent element - CldImage) and displays it as the placeholder untill the target image finishes downloading.

Example: To set a pixelate placeholder for a CldImage component

<cld-image public-id="my-pic-id">
  <cld-placeholder type="vectorize" />
</cld-image>

Result will be similar to the following:

Below is how each placeholder type looks:

CldPoster

Props:

• publicId:
  • required
  • Type: String
• All other Cloudinary configuration options and transformations such as width, crop for cropping type, radius for border radius, etc.

Specify an image to use as poster for a CldVideo component.

<cld-video publicId="my-video-id" overlay="text:arial_60:watchme">
  <cld-poster
    public-id="video-poster"
    width="500"
    crop="scale"
    quality="auto"
  />
</cld-video>

Result

<video poster="https://res.cloudinary.com/my_cloud/image/upload/w_500,c_scale,q_auto/video-poster">
  <!--All the sources-->
</video>

CldContext

Define additional shared Cloudinary configuration and transformation options to apply to all of its children components which are Cloudinary-related.

<cld-context
  cloud-name="my-other-cloudname"
  fetchFormat="auto"
  quality="auto"
  loading="lazy"
>
  <cld-image public-id="my-pic-id" width="200" crop="scale" radius="max" />
  <cld-image public-id="my-other-pic-id" width="500" crop="thumb" height="500" />
</cld-context>

CldTransformation

Define additional transformations such as width, crop for cropping type, radius for border radius, etc to apply on its parent Cloudinary component (except CldContext). Useful for grouping transformations

<cld-image public-id="my-pic-id">
  <cld-transformation width="200" crop="scale" radius="max" />
  <cld-transformation fetchFormat="auto" quality="auto" loading="lazy" />
</cld-image>

You can explore a basic example, or refer the official documentation for more advanced use cases.