Vue.js SDK
Last updated: Jan-10-2023
This page provides an in-depth introduction to the Vue.js frontend framework library.
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.
Full example
This example shows a transformation URL being created using the @cloudinary/url-gen
package, and rendered using Vue.js. It demonstrates the use of tree shaking to reduce the bundle size, which explains why there are so many import
statements.
<script> import { AdvancedImage } from '@cloudinary/vue'; import { Cloudinary } from '@cloudinary/url-gen'; import {Transformation} from '@cloudinary/url-gen'; // Import required actions. 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 {opacity,brightness} from "@cloudinary/url-gen/actions/adjust"; import {byAngle} from "@cloudinary/url-gen/actions/rotate" // Import required qualifiers. import {image} from "@cloudinary/url-gen/qualifiers/source"; import {Position} from "@cloudinary/url-gen/qualifiers/position"; import {compass} from "@cloudinary/url-gen/qualifiers/gravity"; import {focusOn} from "@cloudinary/url-gen/qualifiers/gravity"; import {FocusOn} from "@cloudinary/url-gen/qualifiers/focusOn"; // 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 the transformation. myImg .resize(thumbnail().width(150).height(150).gravity(focusOn(FocusOn.face()))) // Crop the image. .roundCorners(byRadius(20)) // Round the corners. .effect(sepia()) // Apply a sepia effect. .overlay( // Overlay the Cloudinary logo. source( image('cloudinary_icon_blue') .transformation(new Transformation() .resize(scale(50)) // Resize the logo. .adjust(opacity(60)) // Adjust the opacity of the logo. .adjust(brightness(200))) // Adjust the brightness of the logo. ) .position(new Position().gravity(compass('south_east')).offsetX(5).offsetY(5)) // Position the logo. ) .rotate(byAngle(10)) // Rotate the result. .format('png'); // Deliver as PNG. */ export default { components: { AdvancedImage, }, data() { return { myImg, }; }, }; </script> <!-- Render the image in a Vue.js component. --> <template> <div> <AdvancedImage :cldImg="myImg" /> </div> </template>
This code creates the URL required to deliver the front_face.jpg image with the following transformations applied:
- 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 is generated from the above code:
- See all possible transformations in the Transformation URL API reference.
- See all JavaScript transformation actions and qualifiers in the Transformation Builder reference.
- See more examples of image and video transformations using the
js-url-gen v1.x
library.
Get started with Vue.js
Installation
Install Cloudinary's JavaScript and Vue.js packages using the NPM package manager:
Configuration
You can specify the configuration parameters that are used to create the delivery URLs, either using a Cloudinary instance or per image/video.
camelCase
, for example cloudName.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> 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'); export default { components: { AdvancedImage, }, data() { return { myImg, }; }, }; </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 domain name, 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> 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 export default { components: { AdvancedImage, }, data() { return { myImg, }; }, }; </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:
Plugins
The Cloudinary Vue.js library provides plugins to render the media on your site in the most optimal way and improve your user's experience by automating media tasks like lazy loading, responsive images and more.
Sample projects
Try out the examples in these code explorers: