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.
This Readme provides basic installation and usage information. For the complete documentation, see the Vue.js SDK guide_
Install using your favorite package manager (yarn, npm)
npm i who-jonson/cloudinary-vue#next
#OR
yarn add who-jonson/cloudinary-vue#next
Please use Cloudinary module for Nuxt.js projects. You can set it up by using the following:
yarn add @nuxtjs/cloudinary
#OR
npm i @nuxtjs/cloudinary
-
A Global setup - Include CloudinaryVue globally
// main.js import { createApp } from 'vue'; import Cloudinary, { CldImage, CldTransformation } from 'cloudinary-vue'; const app = createApp({ /* component options */ }); // Install Cloudinary app.use(Cloudinary, { configuration: { cloudName: 'demo' }, components: { CldImage, CldTransformation } }); app.mount('#app');
-
A Local setup - You can also import the cloudinary components manually in each of your components.
<!-- ExampleComponent.vue -->
<script>
import { CldImage, CldTransformation } from 'cloudinary-vue';
export default {
name: 'ExampleComponent',
components: {
CldImage,
CldTransformation
}
}
</script>
The CloudinaryVue Plugin accepts a components
object with the Cloudinary components to install
-
components
can also be passed as an array:components:[CldImage. CldTransformation]
-
components
can also be used to rename the cloudinary components:components: { myImage: CldImage, myTransformation: CldTransformation }
In order to properly use this library you have to provide it with a few configuration parameters. All configuration parameters can be applied directly to the element, using a CldContext
component or while installing a plugin (second argument of Vue.use
).
<template>
<div>
<h1>Hello, world!</h1>
<CldImage cloudName="demo" publicId="sample" crop="scale" width="300" />
<CldContext cloudName="demo">
<CldImage publicId="sample">
<CldTransformation crop="scale" width="200" angle="10" />
</CldImage>
</CldContext>
</div>
</template>
Required:
cloudName
- The cloudinary cloud name associated with your Cloudinary account.
Optional:
privateCdn
,secureDistribution
,cname
,cdnSubdomain
- Please refer to Cloudinary Documentation for information on these parameters.
The library includes 5 components:
CldContext
CldTransformation
CldImage
CldVideo
CldPoster
(only used together withCldVideo
)
CldContext
allows you to define shared configuration and resource transformation parameters that are applied to all children elements.
outputs HTML img
tag with a correct src
attribute for provided Cloudinary resource, based on configuration and transformation parameters provided as attributes of this component instance, parent CldContext
and children CldTransformation
instances.
outputs HTML video
tag with a correct sources
for provided Cloudinary resource, based on configuration and transformation parameters provided as attributes of this component instance, parent CldContext
and children CldTransformation
instances.
specify image resource to be provided to poster
attribute of the video
element
The Transformation element allows you to defined additional transformations on the parent element. You can also use built-in transformation
attribute available in CldImage
and CldVideo
for the same effect.
For example:
<CldImage cloudName="demo" publicId="sample">
<CldTransformation angle="-45" />
<CldTransformation effect="trim" angle="45" crop="scale" width="600" />
<CldTransformation overlay="text:Arial_100:Hello" />
</CldImage>
See contributing guidelines in a separate file.
Additional resources are available at:
- Website
- Documentation
- Knowledge Base
- Image transformations documentation
- Video transformations documentation
- Cli plugin for Cloudinary Vue
You can open an issue through GitHub.
Contact us at http://cloudinary.com/contact.
Stay tuned for updates, tips and tutorials: Blog, Twitter, Facebook.
Impact the product, hear updates, test drive new features and more! Join here.
Released under the MIT license.