Vue.js SDK

This page provides an in-depth introduction to the Vue.js frontend framework library.

On this page:

• Overview
  • Quick example
• Get started with Vue.js
  • Vue.js SDK installation and configuration video tutorial
  • Installation
  • Configuration
• Transformations
• Plugins
• Sample projects

Rate this page:

Overview

Cloudinary's Vue.js frontend framework library provides image rendering capabilities and plugins that you can implement using code that integrates seamlessly with your existing Vue.js application.

Quick example

This example shows a transformation URL being created using the @cloudinary/url-gen package, and rendered using Vue.js.

<script setup>
import { AdvancedImage } from '@cloudinary/vue';
import { Cloudinary } from '@cloudinary/url-gen';
import { sepia } from "@cloudinary/url-gen/actions/effect";

// Create a Cloudinary instance and set your cloud name.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo',
  },
});

// Instantiate a CloudinaryImage object for the image with the public ID, 'front_face'.
const myImg = cld.image('front_face');

// Apply a sepia effect.
myImg.effect(sepia());  
</script>

<!-- Render the image in a Vue.js component. -->
<template>
  <div>
    <AdvancedImage :cldImg="myImg" />
  </div>
</template>

This code creates the HTML required to deliver the front_face.jpg image with the sepia effect applied.

You can apply more than one transformation at a time (see chained transformations) to give more interesting results:

import { thumbnail, scale } from "@cloudinary/url-gen/actions/resize";
import { byRadius } from "@cloudinary/url-gen/actions/roundCorners";
import { sepia } from "@cloudinary/url-gen/actions/effect";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { byAngle } from "@cloudinary/url-gen/actions/rotate";
import { format } from "@cloudinary/url-gen/actions/delivery";
import { opacity, brightness } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { png } from "@cloudinary/url-gen/qualifiers/format";
import { focusOn, compass } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("front_face")
  .resize(
    thumbnail()
      .width(150)
      .height(150)
      .gravity(focusOn(face()))
  )
  .roundCorners(byRadius(20))
  .effect(sepia())
  .overlay(
    source(
      image("cloudinary_icon").transformation(
        new Transformation()
          .resize(scale().width(50))
          .adjust(opacity(60))
          .adjust(brightness().level(90))
      )
    ).position(
      new Position()
        .gravity(compass("south_east"))
        .offsetX(5)
        .offsetY(5)
    )
  )
  .rotate(byAngle(10))
  .delivery(format(png()));

• 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)

import { transformationStringFromObject } from "@cloudinary/url-gen";

const transformation = transformationStringFromObject([
  {gravity: "face", height: 150, width: 150, crop: "thumb"},
  {radius: 20},
  {effect: "sepia"},
  {overlay: "cloudinary_icon"},
  {width: 50, crop: "scale"},
  {opacity: 60},
  {effect: "brightness:90"},
  {flags: "layer_apply", gravity: "south_east", x: 5, y: 5},
  {angle: 10},
  {fetch_format: "png"}
  ]);
myImage.addTransformation(transformation);

Get started with Vue.js

Vue.js SDK installation and configuration video tutorial

Watch this video tutorial to see how to install and configure the Vue.js SDK:

Tutorial contents

Installation

Install Cloudinary's JavaScript and Vue.js packages using the NPM package manager:

npm i @cloudinary/url-gen @cloudinary/vue

Configuration

You can specify the configuration parameters that are used to create the delivery URLs, either using a Cloudinary instance or per image/video.

Cloudinary instance configuration

If you want to use the same configuration to deliver all your media assets, it's best to set up the configuration through a Cloudinary instance, for example:

<script setup>
import { AdvancedImage } from '@cloudinary/vue';
import { Cloudinary } from '@cloudinary/url-gen';

// Create a Cloudinary instance and set your cloud name.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo',
  },
});

// Instantiate a CloudinaryImage object for the image with the public ID, 'docs/models'.
const myImg = cld.image('docs/models');

</script>

<!-- Render the image in a Vue.js component. -->
<template>
  <div>
    <AdvancedImage :cldImg="myImg" />
  </div>
</template>

You can set other configuration parameters related to your cloud and URL as required, for example, if you have your own custom delivery hostname, and want to generate a secure URL (HTTPS):

// Create a Cloudinary instance, setting some Cloud and URL configuration parameters.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  },
  url: {
    secureDistribution: 'www.example.com', 
    secure: true 
  }
});

// This creates a URL of the form: https://www.example.com/demo/image/upload/sample

Asset instance configuration

If you need to specify different configurations to deliver your media assets, you can specify the configuration per image/video instance, for example:

<script setup>
import { AdvancedImage } from '@cloudinary/vue';
import { CloudinaryImage } from '@cloudinary/url-gen';
import { URLConfig } from "@cloudinary/url-gen";
import { CloudConfig } from "@cloudinary/url-gen";


// Set the Cloud configuration and URL configuration
let cloudConfig = new CloudConfig({cloudName: 'demo'});
let urlConfig = new URLConfig({secure: true});

// Instantiate and configure a CloudinaryImage object.
let myImg = new CloudinaryImage('docs/shoes', cloudConfig, urlConfig);

// The URL of the image is: https://res.cloudinary.com/demo/image/upload/docs/shoes

</script>

<!-- Render the image in a Vue.js component. -->
<template>
  <div>
    <AdvancedImage :cldImg="myImg" />
  </div>
</template>

Transformations

The @cloudinary/url-gen package simplifies the generation of transformation URLs, and includes special components and directives for easy embedding of assets in your Vue.js application.

The @cloudinary/url-gen package installs an additional transformation-builder-sdk library as a dependency, which handles the transformation generation part of the URL.

You can use the Transformation Builder reference to find all available transformations, syntax and examples.

To find out more about transforming your assets using the @cloudinary/url-gen package, see:

• Vue.js image transformations
• Vue.js video transformations

Plugins

The Cloudinary Vue.js library provides plugins to render the media on your site in the optimal way and improve your user's experience by automating media tasks like lazy loading, responsive images and more.

Video Player is loading.

Play Video

Play

Unmute

Current Time 0:00

/

Duration -:-

Loaded: 0%

0:00

Stream Type LIVE

Seek to live, currently behind liveLIVE

Remaining Time --:-

 

1x

Playback Rate

• 2x
• 1.5x
• 1.25x
• 1x, selected
• 0.5x

Descriptions

• descriptions off, selected

Captions

• captions off, selected

Audio Track

Fullscreen

This is a modal window.

The media could not be loaded, either because the server or network failed or because the format is not supported.

Sample projects

Take a look at the Vue.js sample projects page to help you get started integrating Cloudinary into your Vue.js application.