> ## Documentation Index
> Fetch the complete documentation index at: https://docs.convertly.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue Image CDN SDK

> Use Convertly with Vue 3 for responsive images, automatic formats, smart cropping, and CDN delivery.

```bash theme={"system"}
npm install @convertly-sh/image
```

```vue theme={"system"}
<script setup>
import { provideConvertlyCdn, ConvertlyImage } from "@convertly-sh/image/vue";

provideConvertlyCdn({
  namespace: import.meta.env.VITE_CONVERTLY_CDN_NAMESPACE,
});
</script>

<template>
  <ConvertlyImage
    origin="products"
    src="hero.jpg"
    :width="1200"
    :height="800"
    sizes="(min-width: 768px) 50vw, 100vw"
    alt="Featured product"
  />
</template>
```

The Vue 3 adapter provides a component and composable while keeping Vue as an optional peer dependency. Pass a Convertly Storage file ID as `src`, or use an origin slug and source path.

<Card title="Image transform reference" icon="sliders" href="/docs/image-cdn/transforms">
  Explore every delivery and image transform option.
</Card>