{"id":12974,"library":"cloudinary-vue","title":"Cloudinary Vue 2 SDK","description":"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.","status":"maintenance","version":"1.2.4","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install cloudinary-vue","lang":"bash","label":"npm"},{"cmd":"yarn add cloudinary-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add cloudinary-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the Vue SDK, specifically Vue 2.x.","package":"vue","optional":false}],"imports":[{"note":"Cloudinary is imported as a default export for plugin registration via Vue.use().","wrong":"import { Cloudinary } from 'cloudinary-vue';","symbol":"Cloudinary","correct":"import Cloudinary from 'cloudinary-vue';"},{"note":"Components like CldImage are named exports and should be destructured from the package.","wrong":"import CldImage from 'cloudinary-vue';","symbol":"CldImage","correct":"import { CldImage } from 'cloudinary-vue';"},{"note":"Used as a child component within CldImage or CldVideo to apply transformations.","symbol":"CldTransformation","correct":"import { CldTransformation } from 'cloudinary-vue';"}],"quickstart":{"code":"import Vue from 'vue';\nimport Cloudinary, { CldImage, CldVideo, CldTransformation, CldContext } from 'cloudinary-vue';\n\n// Configure Cloudinary globally\nVue.use(Cloudinary, {\n configuration: { cloudName: process.env.VUE_APP_CLOUDINARY_CLOUD_NAME ?? 'demo' },\n components: {\n CldContext,\n CldImage,\n CldVideo,\n CldTransformation\n }\n});\n\n// Example Vue component usage (e.g., in a .vue file's template section)\n// \n\n// new Vue({\n// el: '#app',\n// data: {\n// // ...\n// }\n// });","lang":"javascript","description":"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."},"warnings":[{"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.","message":"`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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Refer to the Cloudinary documentation on 'Vue.js image and video upload' for alternative methods like the Upload Widget or direct API calls.","message":"This 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure you install `cloudinary-vue` for Vue 2 projects and `@cloudinary/vue` for Vue 3 projects. Verify your Vue version before installation.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The `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.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Vue is not globally available or correctly imported before attempting to call `Vue.use(Cloudinary, ...)`.","error":"Cannot read property 'use' of undefined"},{"fix":"Verify that `Vue.use(Cloudinary, { components: { CldImage, ... } })` is called, or ensure `components: { CldImage }` is defined in the component where you are using it.","cause":"Cloudinary components like `CldImage` were not correctly registered with Vue, either globally via `Vue.use()` or locally within a component's `components` option.","error":"Property or method 'CldImage' is not defined on the instance but referenced during render."},{"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.","cause":"The `cloudName` configuration parameter, essential for connecting to your Cloudinary account, was not provided during the SDK setup.","error":"Cloudinary Error: cloudName must be specified."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}