Registry / web-framework / cloudinary-vue

cloudinary-vue

library1.2.4jsnpmunverified

The `cloudinary-vue` package provides an SDK for integrating Cloudinary's image and video management capabilities into Vue 2 applications. It enables developers to transform, optimize, and deliver media assets efficiently. This version (1.2.4) is specifically designed for Vue 2.x projects and was last published in March 2022. It offers components like `CldImage`, `CldVideo`, and `CldTransformation` to embed and manipulate assets directly within Vue templates. Key differentiators include its declarative component-based approach for applying transformations, automatic optimization, and support for generating HTML tags. While it remains functional for Vue 2, new development and Vue 3 support have transitioned to the `@cloudinary/vue` package, making `cloudinary-vue` primarily in maintenance mode for legacy projects.

web-framework

npm install cloudinary-vue

package ↗homepage ↗

INSTALL

IMPORT

SIG · CLOUDINARY-VUE

cloudinary-vue

web-frameworkjavascriptv1.2.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Cloudinary

✓ import Cloudinary from 'cloudinary-vue';

✗ import { Cloudinary } from 'cloudinary-vue';

Cloudinary is imported as a default export for plugin registration via Vue.use().

CldImage

✓ import { CldImage } from 'cloudinary-vue';

✗ import CldImage from 'cloudinary-vue';

Components like CldImage are named exports and should be destructured from the package.

CldTransformation

✓ import { CldTransformation } from 'cloudinary-vue';

Used as a child component within CldImage or CldVideo to apply transformations.

This quickstart demonstrates global setup of the Cloudinary Vue 2 SDK and basic usage of `cld-image` with a transformation and `cld-video` to render assets.

import Vue from 'vue'; import Cloudinary, { CldImage, CldVideo, CldTransformation, CldContext } from 'cloudinary-vue'; // Configure Cloudinary globally Vue.use(Cloudinary, { configuration: { cloudName: process.env.VUE_APP_CLOUDINARY_CLOUD_NAME ?? 'demo' }, components: { CldContext, CldImage, CldVideo, CldTransformation } }); // Example Vue component usage (e.g., in a .vue file's template section) // <template> // <div id="app"> // <p>Transformed Image:</p> // <cld-context :cloudName="process.env.VUE_APP_CLOUDINARY_CLOUD_NAME ?? 'demo'"> // <cld-image publicId="sample"> // <cld-transformation crop="scale" width="200" angle="10" /> // </cld-image> // </cld-context> // // <p>Original Video (no transformations):</p> // <cld-video publicId="dog"></cld-video> // </div> // </template> // new Vue({ // el: '#app', // data: { // // ... // } // });

Debug

Known issues

breaking`cloudinary-vue` is designed exclusively for Vue 2.x. It does not support Vue 3. Projects migrating to Vue 3 must switch to the newer `@cloudinary/vue` package, which has a different API and component structure.

fix

For Vue 3 projects, install `@cloudinary/vue` and consult its documentation for the updated API. For Vue 2, no fix is needed, but be aware of the lack of future updates.

affects: >=1.0.0

gotchaThis SDK (cloudinary-vue) does not provide file upload functionality directly. Developers need to use other methods, such as Cloudinary's Upload Widget or direct API calls, for client-side uploads.

fix

Refer to the Cloudinary documentation on 'Vue.js image and video upload' for alternative methods like the Upload Widget or direct API calls.

affects: >=1.0.0

gotchaThe package name `cloudinary-vue` is for Vue 2. There is a separate, actively maintained package `@cloudinary/vue` for Vue 3. Installing the wrong package can lead to compatibility issues or frustration.

fix

Ensure you install `cloudinary-vue` for Vue 2 projects and `@cloudinary/vue` for Vue 3 projects. Verify your Vue version before installation.

affects: >=1.0.0

deprecatedThe `cloudinary-vue` package has not been updated since March 2022 (version 1.2.4). While functional for Vue 2, it is considered superseded by `@cloudinary/vue` for modern Vue development and will not receive new features or updates for Vue 2.

fix

For new projects or migration path, consider Vue 3 and the `@cloudinary/vue` package. For existing Vue 2 projects, be aware that security patches or feature enhancements are unlikely.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot read property 'use' of undefined

Vue is not globally available or correctly imported before attempting to call `Vue.use(Cloudinary, ...)`.

fix

Ensure `import Vue from 'vue';` is at the top of your main entry file (e.g., `main.js`) and Vue is properly installed as a dependency.

Property or method 'CldImage' is not defined on the instance but referenced during render.

Cloudinary components like `CldImage` were not correctly registered with Vue, either globally via `Vue.use()` or locally within a component's `components` option.

fix

Verify that `Vue.use(Cloudinary, { components: { CldImage, ... } })` is called, or ensure `components: { CldImage }` is defined in the component where you are using it.

Cloudinary Error: cloudName must be specified.

The `cloudName` configuration parameter, essential for connecting to your Cloudinary account, was not provided during the SDK setup.

fix

Ensure `cloudName` is set in the `configuration` object when calling `Vue.use(Cloudinary, { configuration: { cloudName: 'YOUR_CLOUD_NAME' } })` or on individual components via a prop.

Upgrade

Version history

1.2.4latest on npm

Audit

Dependencies

vuerequiredPeer dependency required for the Vue SDK, specifically Vue 2.x.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/cloudinary-vue ↗

homepagehttps://cloudinary.com ↗