Cloudinary Vue SDK

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

🛠️ How to install

🎉We now support installing via Vue CLI 3.0 🎉

Install with Vue-CLI

After create your application with Vue-CLI, navigate to the created app folder, and install Cloudinary SDK by:

vue add cloudinary

Set up your cloudName and pick the components to use (or use all 😃)

A cloudinary.js file will be added to your src directory, same level with your main.js file. Feel free to customize it if you like. And have fun with Cloudinary! 🤟

More information on the plugin, check out our Vue-CLI plugin for Cloudinary Repo

Manual install with `npm` or `yarn`

Install the package in your project with

npm install cloudinary-vue

#OR

yarn add cloudinary-vue

💻 Configure

Configure Cloudinary options

In your main.js file (or the main entrance file of your application)

import Vue from "vue";
import Cloudinary from "cloudinary-vue";

You can setup Vue to use Cloudinary plugin without any configuration as below

Vue.use(Cloudinary);

Or setup with some global Cloundinary configurations, such as cloudName

Vue.use(Cloudinary, {
  configuration: { cloudName: "demo" }
  //             ^ cloudinary configuration options
});

Globally you can also select and register which Cloudinary components you'd like to use in your app in an array of components:

import Cloudinary, { CldImage } from "cloudinary-vue";

// specify which components to install in an array
Vue.use(Cloudinary, {
  configuration: { cloudName: "demo" },
  components: [ CldImage ]
});

Or define them in object of components, and rename any component if needed.

import Cloudinary, { CldImage, CldTransformation } from "cloudinary-vue";

Vue.use(Cloudinary, {
  configuration: { cloudName: "demo" },
  components: {
    CldImage,
    CldXf: CldTransformation
    //^ a custom name
  }
});

Notes: By default, if there is no components defined, the plugin will automatically install all available Cloudinary components.

General usage

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>

    <cld-image cloudName="demo" publicId="sample" crop="scale" width="300" />

    <cld-context cloudName="demo">
      <cld-image publicId="sample">
        <cld-transformation crop="scale" width="200" angle="10" />
      </cld-image>
    </cld-context>
  </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.

Specific usage

The library includes 5 components:

CldContext
CldTransformation
CldImage
CldVideo
CldPoster (only used together with CldVideo)

CldContext

CldContext allows you to define shared configuration and resource transformation parameters that are applied to all children elements.

CldImage

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.

CldVideo

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.

CldPoster (optional)

specify image resource to be provided to poster attribute of the video element

CldTransformation

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:

<cld-image cloudName="demo" publicId="sample">
  <cld-transformation angle="-45" />
  <cld-transformation effect="trim" angle="45" crop="scale" width="600" />
  <cld-transformation overlay="text:Arial_100:Hello" />
</cld-image>

doc22940 / cloudinary-vue Goto Github PK

cloudinary-vue's Introduction

cloudinary-vue's People

Contributors

Stargazers

Watchers

Recommend Projects

Recommend Topics

Recommend Org

Jobs