-
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
AdvancedVideocustom 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