Skip to content
Cloudinary VueJS Library
JavaScript Vue
Branch: master
Clone or download
asisayag2 Merge pull request #53 from cloudinary/readme-update-known-issue
Remove notification about "known issue with CodeSandbox" from README
Latest commit e6bf76d Nov 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config/storybook add storybook Aug 14, 2019
dist re-generate files Oct 10, 2019
docs-sources re-generate files Oct 10, 2019
docs re-generate files Oct 10, 2019
src fix #23 responsive feature Nov 4, 2019
tests/unit fix #39 Oct 10, 2019
.browserslistrc init Jan 7, 2019
.eslintrc.js refactor Aug 27, 2019
.gitignore add gitignore Aug 27, 2019
.npmignore redefine npm package files Mar 27, 2019
.travis.yml add travis yaml file Mar 25, 2019
CHANGELOG.md add changelog Nov 5, 2019
README.md Remove notification about "known issue with CodeSandbox" Nov 8, 2019
babel.config.js init Jan 7, 2019
favicon.png configure styleguidist Jan 31, 2019
jest.config.js init Jan 7, 2019
package-lock.json
package.json Update package.json Oct 22, 2019
postcss.config.js init Jan 7, 2019
styleguide.config.js remove future components May 30, 2019
vue.config.js configure styleguide Mar 21, 2019
yarn.lock fix #39 Oct 10, 2019

README.md

Cloudinary Vue SDK

Build Status

Cloudinary is a cloud service that offers a solution to a web application's entire image management pipeline.

Easily upload images to the cloud. Automatically perform smart image resizing, cropping and conversion without installing any complex software. Integrate Facebook or Twitter profile image extraction in a snap, in any dimension and style to match your website’s graphics requirements. Images are seamlessly delivered through a fast CDN, and much much more.

Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with any web application, existing or new.

Cloudinary provides URL and HTTP based APIs that can be easily integrated with any Web development framework.

BETA

This is a BETA version. Things are still due to changes.

Usage

Installation

🎉We now support installing via Vue CLI 3.0

Install with Vue-CLI

  1. After create your application with Vue-CLI, navigate to the created app folder, and install Cloudinary SDK by:
vue add cloudinary
  1. Set up your cloudName and pick the components to use (or use all 😃)

Set up with cloudName and options

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

Install the library with npm

Install the package in your project with

npm install cloudinary-vue
Import and attach a plugin
import Vue from "vue";
import Cloudinary from "cloudinary-vue";

Vue.use(Cloudinary);
// ..or provide some global cloudinary service configuration..
Vue.use(Cloudinary, {
  configuration: { cloudName: "demo" }
  //             ^ cloudinary configuration options
});
// ..or specify which components to install..
Vue.use(Cloudinary, {
  configuration: { cloudName: "demo" },
  components: ["CldImage"]
});
// ..or rename all or some components..
Vue.use(Cloudinary, {
  configuration: { cloudName: "demo" },
  components: {
    CldImage: true,
    // component name
    //        ^ true just turns if on
    CldTransformation: "CldXf"
    //                 ^ a custom name
  }
});
// ..or rename using new names as keys.
Vue.use(Cloudinary, {
  configuration: { cloudName: "demo" },
  components: {
    CldXf: "CldTransformation"
  }
});

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

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.

CldTransformation

The Transformation element allows you to defined additional transformations on the parent element.

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>

CldPoster

an optional CldVideo child element that will specify image resource to be provided to poster attribute of the video element.

Additional resources

Additional resources are available at:

Support

You can open an issue through GitHub.

Contact us at http://cloudinary.com/contact.

Stay tuned for updates, tips and tutorials: Blog, Twitter, Facebook.

Join the Community

Impact the product, hear updates, test drive new features and more! Join here.

License

Released under the MIT license.

Development

Installation

// in repository folder
npm i -g @vue/cli
npm i

Compile and minify for production

npm run build

Documentation

Run local styleguidist server

npm run styleguide

Build styleguidist output

npm run build:styleguide

Lint files

npm run lint

Run all tests

npm t
You can’t perform that action at this time.