VueSDK

VueSDK

Description

The Cloudinary Vue SDK contains components like <AdvancedImage> to easily render your media assets from Cloudinary. The SDK also comes with support for optional JS plugins that make the components smart, with features like lazy loading, placeholder, accessibility & responsiveness.

Examples

Please note that the order of the plugins is important. See Plugin Order for more details.

// AdvancedImage
			<template>
			  <div>
			    <AdvancedImage :cldImg="cldImg" :plugins="plugins" />
			  </div>
			</template>
			
			<script lang="ts">
			import { defineComponent } from 'vue';
			import { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage';
			import { AdvancedImage, responsive } from '@cloudinary/vue';
			
			export default defineComponent({
			  name: 'App',
			  components: {
			    AdvancedImage,
			},
			  setup(props) {
			    const cldImg = new CloudinaryImage(
			      'sample',
			      { cloudName: 'demo' },
			      { analytics: false }
			  );
			
			    const plugins = [responsive({ steps: 100 })];
			
			    return {
			      cldImg,
			      plugins,
			  };
			 },
			});
			</ script>

Using AdvancedVideo custom defined resources.

// AdvancedVideo
			<template>
			  <AdvancedVideo :cldVid="cldVid" :sources="sources" controls width="600" />
			</template>
			
			<script lang="ts">
			import { defineComponent } from "vue";
			import { auto } from "@cloudinary/url-gen/qualifiers/videoCodec";
			import { videoCodec } from "@cloudinary/url-gen/actions/transcode";
			import { AdvancedVideo } from "../dist";
			import { CloudinaryVideo } from "@cloudinary/url-gen/assets/CloudinaryVideo";
			
			export default defineComponent({
			  name: "App",
			  components: {
			    AdvancedVideo,
			 },
			  setup(props) {
			    const cldVid = new CloudinaryVideo(
			      "dog",
			      { cloudName: "demo" },
			      { analytics: false }
			    );
			
			    const sources = [
			      {
			        type: "mp4",
			        transcode: videoCodec(auto()),
			      },
			      {
			        type: "webm",
			        transcode: videoCodec(auto()),
			      },
			    ];
			
			    return {
			      cldVid,
			      sources,
			    };
			  },
			});
			</ script>

Details

Modules

AdvancedImage
AdvancedVideo