Wondering what’s next for npm?Check out our public roadmap! »

    cloudinary-vue

    1.2.0 • Public • Published

    Cloudinary Vue SDK

    Build Status

    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_

    🛠️ Installation

    Vue 2.x

    1. Install using Vue-CLI

      • After you 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 😃) 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
    2. install using your favorite package manager (yarn, npm)

      npm install cloudinary-vue
      yarn add cloudinary-vue

    Nuxt.js

    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
    

    Setup and configuration

    Vue 2.x - Setup and configuration

    1. A Global setup - Include CloudinaryVue globally

      import Vue from 'vue';
      import Cloudinary, { CldImage, CldTransformation } from "cloudinary-vue";
      
      Vue.use(Cloudinary, {
        configuration: { cloudName: "demo" },
        components: {
          CldImage,
          CldTransformation
        }
      });
    2. A Local setup - You can also import the cloudinary components manually in each of your components.

    Plugin Configuration

    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
          }

    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>

    How to contribute?

    See contributing guidelines in a separate file.

    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.

    Keywords

    none

    Install

    npm i cloudinary-vue

    DownloadsWeekly Downloads

    2,875

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    741 kB

    Total Files

    86

    Last publish

    Collaborators

    • avatar