### Vue 3 SDK Setup and Usage Example

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/vue/README.md

Set up the Cloudinary Vue SDK in a Vue 3 application and render an image with responsive plugins. Ensure you have imported necessary components and classes.

```vue
<script type="module">
import { AdvancedImage, responsive } from "@cloudinary/vue"
import { CloudinaryImage } from "@cloudinary/url-gen/assets/CloudinaryImage";

export default {
  components: {
    AdvancedImage
  },
  data() {
    return {
      plugins: [responsive({steps: 100})],
      cldImg: new CloudinaryImage(
          "sample",
          {cloudName: "demo"}
      )
    };
  }
};
</script>

<template>
  <div>
    <p>text</p>
    <AdvancedImage :cldImg="cldImg" :plugins="plugins" />
  </div>
</template>
```

--------------------------------

### Install Cloudinary React SDK

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/react/README.md

Install the Cloudinary React SDK and URL generation library using npm or yarn.

```bash
npm i @cloudinary/url-gen @cloudinary/react --save
```

```bash
yarn add @cloudinary/url-gen @cloudinary/react --save
```

--------------------------------

### Install Cloudinary SDKs for React, Angular, and Vue

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Install the framework-specific SDK along with the URL generation package using npm.

```bash
# React
npm install @cloudinary/react @cloudinary/url-gen

# Angular
npm install @cloudinary/ng @cloudinary/url-gen

# Vue 3
npm install @cloudinary/vue @cloudinary/url-gen
```

--------------------------------

### Install Cloudinary Angular SDK

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/angular/projects/cloudinary-library/README.md

Install the Cloudinary Angular SDK using npm or yarn. This command installs the necessary packages for integrating Cloudinary into your Angular application.

```bash
npm i @cloudinary/url-gen @cloudinary/ng --save
```

```bash
yarn add @cloudinary/url-gen @cloudinary/angular --save
```

--------------------------------

### Install Cloudinary Vue SDK

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/vue/README.md

Install the Cloudinary Vue SDK and its core URL generation package using npm or yarn.

```bash
npm i @cloudinary/url-gen @cloudinary/vue
```

```bash
yarn add @cloudinary/url-gen @cloudinary/vue
```

--------------------------------

### Setup Cloudinary React SDK

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/react/README.md

Import necessary components from the Cloudinary React SDK for setting up your Cloudinary instance.

```javascript
import React from 'react';
import { AdvancedImage } from '@cloudinary/react'
import { Cloudinary } from '@cloudinary/url-gen';
```

--------------------------------

### Install Cloudinary React Packages

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/README.md

Install the necessary Cloudinary packages for React integration. This includes the React SDK and the core URL generation library.

```bash
npm i @cloudinary/react @cloudinary/url-gen
```

--------------------------------

### Get Angular CLI Help

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/playground/angular/angular-playground/README.md

Displays help information for the Angular CLI. Use this to explore available commands and options.

```bash
ng help
```

--------------------------------

### Run Angular Development Server

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/playground/angular/angular-playground/README.md

Use this command to start the Angular development server. It automatically reloads the application when source files are changed.

```bash
ng serve
```

--------------------------------

### Run Angular Unit Tests

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/playground/angular/angular-playground/README.md

Executes unit tests using Karma. Ensure Karma is installed and configured for your project.

```bash
ng test
```

--------------------------------

### Run Angular End-to-End Tests

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/playground/angular/angular-playground/README.md

Executes end-to-end tests. Requires an end-to-end testing package to be installed.

```bash
ng e2e
```

--------------------------------

### Setup CloudinaryModule in app.module.ts

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/angular/projects/cloudinary-library/README.md

Import and include the CloudinaryModule in your Angular application's module file to enable Cloudinary functionalities.

```typescript
// In your app.module.ts:

// Import the CloudinaryModule.
import {CloudinaryModule} from '@cloudinary/ng';

imports: [
  ...,
  CloudinaryModule
],

```

--------------------------------

### Angular AdvancedVideo Component Setup

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Integrate the `<advanced-video>` component within an Angular application. This snippet shows the component definition, including event handlers and source configurations for video playback.

```typescript
// video.component.ts
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { Cloudinary } from '@cloudinary/url-gen';
import { CloudinaryVideo } from '@cloudinary/url-gen';
import { videoCodec } from '@cloudinary/url-gen/actions/transcode';
import { auto } from '@cloudinary/url-gen/qualifiers/videoCodec';

@Component({
  selector: 'app-video',
  template: `
    <advanced-video
      [cldVid]="vid"
      [sources]="sources"
      [cldPoster]="'auto'"
      [innerRef]="videoRef"
      controls
      muted
      (play)="onPlay()"
      (ended)="onEnded()">
    </advanced-video>
  `
})
export class VideoComponent implements OnInit {
  vid: CloudinaryVideo;
  videoRef: ElementRef;
  sources = [
    { type: 'mp4', codecs: ['avc1.4D401E'], transcode: videoCodec(auto()) },
    { type: 'webm', codecs: ['vp8'], transcode: videoCodec(auto()) }
  ];

  ngOnInit() {
    const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
    this.vid = cld.video('dog');
  }

  onPlay() { console.log('Video playing'); }
  onEnded() { console.log('Video ended'); }
}
```

--------------------------------

### Angular AdvancedImage Component Setup

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Configure the CloudinaryModule in your Angular application's app.module.ts. This snippet shows the necessary imports and NgModule configuration.

```typescript
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CloudinaryModule } from '@cloudinary/ng';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, CloudinaryModule],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

--------------------------------

### Angular AdvancedImage Component Usage

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Implement the `<advanced-image>` component in your Angular component. This example demonstrates how to bind an image asset and apply various plugins for enhanced features like lazy loading and responsiveness.

```typescript
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Cloudinary } from '@cloudinary/url-gen';
import { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage';
import { lazyload, responsive, accessibility, placeholder } from '@cloudinary/ng';
import { fill } from '@cloudinary/url-gen/actions/resize';

@Component({
  selector: 'app-root',
  template: `
    <advanced-image
      [cldImg]="img"
      [plugins]="plugins"
      alt="Sample image"
      width="400"
      height="300"
      loading="lazy">
    </advanced-image>
  `
})
export class AppComponent implements OnInit {
  img: CloudinaryImage;
  plugins = [lazyload(), responsive({ steps: 100 }), accessibility(), placeholder({ mode: 'pixelate' })];

  ngOnInit() {
    const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
    this.img = cld.image('sample').resize(fill().width(400).height(300));
  }
}
```

--------------------------------

### Lazyload Plugin with Custom Intersection Options

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Configures IntersectionObserver options for lazy loading, allowing control over when the image starts loading relative to the viewport.

```tsx
import { AdvancedImage, lazyload } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('sample');

// Custom intersection options
<AdvancedImage
  cldImg={img}
  plugins={[
    lazyload({
      rootMargin: '100px',  // Start loading 100px before entering viewport
      threshold: 0.25       // Load when 25% visible
    })
  ]}
  style={{ width: '400px', height: '300px' }}
/>
```

--------------------------------

### Vue 3 AdvancedImage Component Usage

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Utilize the `<AdvancedImage>` component in a Vue 3 application. This example demonstrates binding a Cloudinary image asset and applying plugins for responsive design and accessibility features.

```vue
<template>
  <div>
    <AdvancedImage
      :cldImg="cldImg"
      :plugins="plugins"
      alt="Sample image"
      class="responsive-image"
    />
  </div>
</template>

<script setup lang="ts">
import { Cloudinary } from '@cloudinary/url-gen';
import { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage';
import { AdvancedImage, responsive, lazyload, placeholder, accessibility } from '@cloudinary/vue';
import { fill } from '@cloudinary/url-gen/actions/resize';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });

const cldImg: CloudinaryImage = cld.image('sample')
  .resize(fill().width(800).height(600));

const plugins = [
  lazyload({ rootMargin: '0px', threshold: 0.1 }),
  responsive({ steps: [400, 800, 1200] }),
  accessibility({ mode: 'colorblind' }),
  placeholder({ mode: 'vectorize' })
];
</script>

<style scoped>
.responsive-image {
  max-width: 100%;
  height: auto;
}
</style>
```

--------------------------------

### Basic React Image Usage with Plugins

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/README.md

Demonstrates basic usage of the AdvancedImage component in React. Configure your Cloudinary instance and import necessary components and plugins. The order of plugins can be important for optimal results.

```javascript
import React from 'react'
// Cloudinary is used to configure your account and generate urls for your media assets
import {Cloudinary} from "@cloudinary/url-gen";
// Import the cloudinary media component (AdvancedImage / AdvancedVideo),
// and the plugins you want to use.
import {AdvancedImage, accessibility, responsive} from '@cloudinary/react';

// Once per project/app - configure your instance.
// See the documentation of @cloudinary/url-gen for more information.
const myCld = new Cloudinary({cloud: {cloudName: 'demo'}});

export const App = () => {
  // Create a new image object:
  const img = myCld.image('sample');

  // Render your component.
  return (
    <div>
      <AdvancedImage cldImg={img} plugins={[responsive(), accessibility()]}/>
    </div>
  )
};
```

```javascript
<AdvancedImage plugins={[lazyload(), responsive(), accessibility(), placeholder()]}/>
```

--------------------------------

### Initialize and Use HtmlVideoLayer

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Use HtmlVideoLayer for low-level video rendering with automatic source tag generation. It requires an HTMLVideoElement, a Cloudinary video instance, and an array of source configurations. The 'auto' poster option generates a poster from the video.

```typescript
import { HtmlVideoLayer, lazyload, cancelCurrentlyRunningPlugins } from '@cloudinary/html';
import { Cloudinary } from '@cloudinary/url-gen';
import { videoCodec } from '@cloudinary/url-gen/actions/transcode';
import { auto } from '@cloudinary/url-gen/qualifiers/videoCodec';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const cloudinaryVideo = cld.video('dog');

const videoElement = document.querySelector('video') as HTMLVideoElement;

const sources = [
  { type: 'mp4', codecs: ['avc1.4D401E'], transcode: videoCodec(auto()) },
  { type: 'webm', codecs: ['vp8'], transcode: videoCodec(auto()) }
];

const htmlVideoLayer = new HtmlVideoLayer(
  videoElement,
  cloudinaryVideo,
  sources,
  [lazyload()],
  { controls: true, muted: true, autoplay: false },
  'auto', // poster: 'auto' generates poster from video
  { useFetchFormat: true }
);

// Update video source
htmlVideoLayer.update(newCloudinaryVideo, sources, plugins, videoAttributes, poster);

// Cleanup
cancelCurrentlyRunningPlugins(htmlVideoLayer.htmlPluginState);
```

--------------------------------

### Build Angular Project

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/playground/angular/angular-playground/README.md

Compiles the Angular application for deployment. Build artifacts are stored in the 'dist/' directory.

```bash
ng build
```

--------------------------------

### Cloudinary Plugin Order Recommendation

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/vue/README.md

Use this recommended order for Cloudinary plugins to achieve optimal results. Any plugin can be omitted, but the relative order should be maintained.

```javascript
[lazyload(), responsive(), accessibility(), placeholder()]
```

--------------------------------

### Apply Advanced Plugins to Cloudinary Image

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/angular/projects/cloudinary-library/README.md

Import and configure Cloudinary plugins such as lazyload, responsive, accessibility, and placeholder. Apply these plugins to the CloudinaryImage using the plugins input property on the <advanced-image> component.

```typescript
import { CloudinaryImage } from "@cloudinary/url-gen";
import {
  lazyload,
  responsive,
  accessibility,
  placeholder
} from "@cloudinary/ng";

export class AppComponent {
  cloudinaryImage = new CloudinaryImage("sample", { cloudName: "demo" });
  plugins = [lazyload(),responsive(), accessibility(), placeholder()];
}

```

--------------------------------

### Responsive Plugin with Step Intervals

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Automatically resizes images based on parent container width using predefined step intervals. Updates on window resize.

```tsx
import { AdvancedImage, responsive } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('sample');

// Using step intervals (rounds up to nearest step)
<AdvancedImage
  cldImg={img}
  plugins={[responsive({ steps: 100 })]} // 100px intervals: 100, 200, 300...
/>
```

--------------------------------

### Apply Advanced Plugins for Image Rendering

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/react/README.md

Utilize Cloudinary React SDK plugins like lazyload, responsive, accessibility, and placeholder for enhanced image rendering. Ensure plugins are used in the recommended order.

```tsx
import { CloudinaryImage } from "@cloudinary/url-gen";
import {
  lazyload,
  responsive,
  accessibility,
  placeholder
} from "@cloudinary/react";

cloudinaryImage = new CloudinaryImage("sample", { cloudName: "demo" });

const App = () => {
  return <AdvancedImage cldImg={img} plugins={[lazyload(),responsive(), accessibility(), placeholder()]} />;
};
```

--------------------------------

### Transform and Optimize Assets with Cloudinary React

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/react/README.md

Instantiate Cloudinary, create an image object, and render it using the AdvancedImage component for transformation and optimization.

```tsx
import { AdvancedImage } from '@cloudinary/react'
import { Cloudinary } from '@cloudinary/url-gen';

const myCld = new Cloudinary({
  cloud: {
    cloudName: "demo",
  },
});

let img = myCld.image('sample');

const App = () => {
  return <AdvancedImage cldImg={img}/>
};
```

--------------------------------

### Responsive Plugin with Explicit Breakpoints

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Automatically resizes images based on parent container width using explicit breakpoint values. Updates on window resize.

```tsx
import { AdvancedImage, responsive } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('sample');

// Using explicit breakpoints
<AdvancedImage
  cldImg={img}
  plugins={[responsive({ steps: [320, 640, 960, 1280, 1920] })]} 
/>
```

--------------------------------

### Responsive Plugin Default Behavior

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Automatically resizes images to match the exact parent container width. Updates on window resize.

```tsx
import { AdvancedImage, responsive } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('sample');

// Default behavior (uses exact container width)
<AdvancedImage cldImg={img} plugins={[responsive()]} />
```

--------------------------------

### Generate Angular Component

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/playground/angular/angular-playground/README.md

Scaffolds a new Angular component. This command can also be used to generate directives, pipes, services, classes, guards, interfaces, enums, and modules.

```bash
ng generate component component-name
```

--------------------------------

### HtmlImageLayer Core Functionality

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

The core class for handling image rendering and plugin execution in the Cloudinary HTML SDK. Used for direct DOM manipulation.

```typescript
import { HtmlImageLayer, responsive, placeholder, cancelCurrentlyRunningPlugins } from '@cloudinary/html';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const cloudinaryImage = cld.image('sample');

// Get reference to an img element
const imgElement = document.querySelector('img') as HTMLImageElement;

// Create layer instance with plugins
const htmlLayer = new HtmlImageLayer(
  imgElement,
  cloudinaryImage,
  [responsive({ steps: 100 }), placeholder({ mode: 'blur' })],
  { sdkSemver: '1.0.0', techVersion: '18.0.0', sdkCode: 'A' } // Analytics options
);

// Update with new image/plugins
htmlLayer.update(cloudinaryImage, [responsive()], analyticsOptions);

// Cleanup on component unmount
cancelCurrentlyRunningPlugins(htmlLayer.htmlPluginState);
htmlLayer.unmount();
```

--------------------------------

### Placeholder Plugin Vectorized Mode

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Displays a lightweight, SVG-like placeholder image while the full-resolution image loads. This is the default mode.

```tsx
import { AdvancedImage, placeholder } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('sample');

// Vectorized placeholder (default) - SVG-like low-detail version
<AdvancedImage cldImg={img} plugins={[placeholder()]} />
```

--------------------------------

### Placeholder Plugin Predominant Color Mode

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Displays a solid color background based on the image's predominant color as a placeholder while the full-resolution image loads.

```tsx
import { AdvancedImage, placeholder } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('sample');

// Predominant color placeholder - solid color background
<AdvancedImage cldImg={img} plugins={[placeholder({ mode: 'predominant-color' })]} />
```

--------------------------------

### Advanced Image Component with Plugins

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/angular/projects/cloudinary-library/README.md

Render an advanced image component in your Angular template, binding both the CloudinaryImage and the configured plugins. Ensure plugins are in the recommended order.

```html
<advanced-image [cldImg]="cloudinaryImage" [plugins]="plugins">

```

--------------------------------

### Accessibility Plugin Bright Mode

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Applies accessibility transformations optimized for bright viewing environments.

```tsx
import { AdvancedImage, accessibility } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('sample');

// Bright mode - optimized for bright environments
<AdvancedImage cldImg={img} plugins={[accessibility({ mode: 'brightmode' })]} />
```

--------------------------------

### Render Cloudinary Images with Plugins in React

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Use the AdvancedImage component to render Cloudinary images. Recommended plugin order is lazyload, responsive, accessibility, and placeholder.

```tsx
import React from 'react';
import { Cloudinary } from '@cloudinary/url-gen';
import { AdvancedImage, responsive, lazyload, placeholder, accessibility } from '@cloudinary/react';
import { fill } from '@cloudinary/url-gen/actions/resize';
import { autoGravity } from '@cloudinary/url-gen/qualifiers/gravity';

// Initialize Cloudinary instance
const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });

function App() {
  // Create and transform image
  const img = cld.image('sample')
    .resize(fill().width(400).height(300).gravity(autoGravity()));

  return (
    <div>
      {/* Basic usage */}
      <AdvancedImage cldImg={img} alt="Sample image" />

      {/* With plugins (recommended order: lazyload, responsive, accessibility, placeholder) */}
      <AdvancedImage
        cldImg={img}
        plugins={[
          lazyload({ rootMargin: '10px', threshold: 0.25 }),
          responsive({ steps: [200, 400, 800, 1200] }),
          accessibility({ mode: 'darkmode' }),
          placeholder({ mode: 'blur' })
        ]}
        alt="Image with all plugins"
        style={{ maxWidth: '100%' }}
      />
    </div>
  );
}
```

--------------------------------

### Lazyload Plugin Basic Usage

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Delays image loading until the element enters the viewport using IntersectionObserver. Requires explicit dimensions to be set.

```tsx
import { AdvancedImage, lazyload } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('sample');

// Basic lazy loading
<AdvancedImage
  cldImg={img}
  plugins={[lazyload()]} 
  style={{ width: '400px', height: '300px' }} // Important: set dimensions
/>
```

--------------------------------

### Placeholder Plugin Blur Mode

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Displays a blurred version of the image as a placeholder while the full-resolution image loads.

```tsx
import { AdvancedImage, placeholder } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('sample');

// Blur placeholder - gaussian blur effect
<AdvancedImage cldImg={img} plugins={[placeholder({ mode: 'blur' })]} />
```

--------------------------------

### Initialize CloudinaryImage in Component

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/angular/projects/cloudinary-library/README.md

Initialize a CloudinaryImage object within your Angular component's ngOnInit lifecycle hook. This sets up the image asset with your cloud name and public ID.

```typescript
import {CloudinaryImage} from '@cloudinary/url-gen/assets/CloudinaryImage';

export class AppComponent implements OnInit{
  img: CloudinaryImage;

  ngOnInit() {
     const myCld = new Cloudinary({ cloudName: 'demo'});
     this.img = myCld().image('sample');
  }
}

```

--------------------------------

### Generate Server-Side Rendering URL

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

The serverSideSrc utility generates an image URL suitable for server-side rendering. It accepts plugins, a Cloudinary image instance, and optional analytics options. This is useful for frameworks like Next.js or Nuxt.js.

```typescript
import { serverSideSrc, placeholder, accessibility } from '@cloudinary/html';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('sample');

// Generate SSR-compatible URL with plugins applied
const plugins = [placeholder({ mode: 'blur' }), accessibility({ mode: 'darkmode' })];
const analyticsOptions = { sdkSemver: '1.0.0', techVersion: '18.0.0', sdkCode: 'A' };

const ssrUrl = serverSideSrc(plugins, img, analyticsOptions);
// Returns URL with placeholder and accessibility transformations applied

// Use in SSR context (Next.js, Nuxt, etc.)
const html = `<img src="${ssrUrl}" alt="Server rendered image" />`;
```

--------------------------------

### Accessibility Plugin Monochrome Mode

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Applies a grayscale transformation for accessibility, creating a monochrome version of the image.

```tsx
import { AdvancedImage, accessibility } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('sample');

// Monochrome - grayscale version
<AdvancedImage cldImg={img} plugins={[accessibility({ mode: 'monochrome' })]} />
```

--------------------------------

### Render Cloudinary Videos with Plugins in React

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

The AdvancedVideo component renders Cloudinary videos. It supports custom sources, auto poster generation, and plugins like lazyload.

```tsx
import React, { useRef } from 'react';
import { Cloudinary } from '@cloudinary/url-gen';
import { AdvancedVideo, lazyload } from '@cloudinary/react';
import { videoCodec } from '@cloudinary/url-gen/actions/transcode';
import { auto } from '@cloudinary/url-gen/qualifiers/videoCodec';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });

function VideoPlayer() {
  const videoRef = useRef();
  const vid = cld.video('dog');

  // Custom video sources with specific codecs
  const sources = [
    {
      type: 'mp4',
      codecs: ['avc1.4D401E', 'mp4a.40.2'],
      transcode: videoCodec(auto())
    },
    {
      type: 'webm',
      codecs: ['vp8', 'vorbis'],
      transcode: videoCodec(auto())
    }
  ];

  return (
    <div>
      {/* Basic video with controls */}
      <AdvancedVideo
        cldVid={vid}
        controls
        autoPlay={false}
        muted
        loop
      />

      {/* Video with custom sources and auto poster */}
      <AdvancedVideo
        cldVid={vid}
        sources={sources}
        cldPoster="auto"
        plugins={[lazyload()]}
        innerRef={videoRef}
        controls
        preload="metadata"
        onPlay={() => console.log('Video started')}
        onEnded={() => console.log('Video ended')}
      />
    </div>
  );
}
```

--------------------------------

### Placeholder Plugin Pixelate Mode

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Displays a pixelated version of the image as a placeholder while the full-resolution image loads.

```tsx
import { AdvancedImage, placeholder } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('sample');

// Pixelate placeholder - pixelated version
<AdvancedImage cldImg={img} plugins={[placeholder({ mode: 'pixelate' })]} />
```

--------------------------------

### Accessibility Plugin Dark Mode

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Applies accessibility transformations optimized for dark viewing environments. This is the default mode.

```tsx
import { AdvancedImage, accessibility } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('sample');

// Dark mode (default) - optimized for dark environments
<AdvancedImage cldImg={img} plugins={[accessibility()]} />
<AdvancedImage cldImg={img} plugins={[accessibility({ mode: 'darkmode' })} />
```

--------------------------------

### Vue 3 AdvancedVideo Component Usage

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Integrate the `<AdvancedVideo>` component in Vue 3. This snippet shows how to configure video sources, poster, and playback controls for a Cloudinary video asset.

```vue
<template>
  <AdvancedVideo
    :cldVid="cldVid"
    :sources="sources"
    :cldPoster="'auto'"
    :useFetchFormat="true"
    controls
    width="600"
  />
</template>

<script setup lang="ts">
import { Cloudinary } from '@cloudinary/url-gen';
import { CloudinaryVideo } from '@cloudinary/url-gen/assets/CloudinaryVideo';
import { AdvancedVideo } from '@cloudinary/vue';
import { videoCodec } from '@cloudinary/url-gen/actions/transcode';
import { auto } from '@cloudinary/url-gen/qualifiers/videoCodec';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const cldVid: CloudinaryVideo = cld.video('dog');

const sources = [
  { type: 'mp4', transcode: videoCodec(auto()) },
  { type: 'webm', transcode: videoCodec(auto()) }
];
</script>
```

--------------------------------

### Accessibility Plugin Colorblind Mode

Source: https://context7.com/cloudinary/frontend-frameworks/llms.txt

Applies accessibility transformations optimized for users with color vision deficiency.

```tsx
import { AdvancedImage, accessibility } from '@cloudinary/react';
import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({ cloud: { cloudName: 'demo' } });
const img = cld.image('sample');

// Colorblind - optimized for color vision deficiency
<AdvancedImage cldImg={img} plugins={[accessibility({ mode: 'colorblind' })]} />
```

--------------------------------

### Display Cloudinary Image in Template

Source: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/angular/projects/cloudinary-library/README.md

Use the <advanced-image> component in your Angular template to display the CloudinaryImage object. Bind the component's cldImg input to your image instance.

```html
<advanced-image [cldImg]="this.img"></advanced-image>

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.