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

# Vue.js

> Render optimized, responsive images and video in Vue 3 with `<ARImage>` and `<ARVideo>`, plus a browser upload widget.

The `@autorender/vue` SDK provides Vue 3 components — `<ARImage>` and `<ARVideo>` — that render optimized media from an Autorender delivery URL, a `useAutoRenderProvider` composable for workspace config, and an uploader for browser uploads.

## Prerequisites

* An Autorender account with a workspace ID — [create one in the dashboard](https://app.autorender.io)
* Vue **3.0** or later, with Vite `^4` / `^5` / `^6` / `^7`

## Guide

<Steps>
  <Step title="Install the package.">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @autorender/vue
      ```

      ```bash yarn theme={null}
      yarn add @autorender/vue
      ```

      ```bash pnpm theme={null}
      pnpm add @autorender/vue
      ```

      ```bash bun theme={null}
      bun add @autorender/vue
      ```
    </CodeGroup>

    If you use `<ARVideo>` (Video.js / HLS / DASH), add the `autorenderVue()` Vite plugin to your `vite.config.ts`:

    ```ts vite.config.ts {6} theme={null}
    import { defineConfig } from 'vite';
    import vue from '@vitejs/plugin-vue';
    import { autorenderVue } from '@autorender/vue/vite';

    export default defineConfig({
      plugins: [vue(), autorenderVue()],
    });
    ```

    If you don't use `<ARVideo>`, skip the video CJS shims with `videoShims: false`:

    ```ts vite.config.ts theme={null}
    plugins: [vue(), autorenderVue({ videoShims: false })],
    ```
  </Step>

  <Step title="Set up the provider.">
    ```vue App.vue {5} theme={null}
    <script setup lang="ts">
    import { useAutoRenderProvider } from '@autorender/vue/viewtag';

    useAutoRenderProvider({
      baseUrl: 'https://assets.autorender.io',
      workspace: 'LOKVTtKVGb',
    });
    </script>
    ```
  </Step>

  <Step title="Render your first image.">
    ```vue ProductImage.vue {3} theme={null}
    <template>
      <ARImage
        src="products/chair.jpg"
        :width="400"
        :height="400"
        alt="Chair"
        :transformations="{ fit: 'cover' }"
        :responsive="true"
        :lazy="true"
      />
    </template>

    <script setup lang="ts">
    import { ARImage } from '@autorender/vue/viewtag';
    </script>
    ```

    This renders an `<img>` resized to **400×400 px**, cropped to fill, with a responsive `srcset` and lazy loading.
  </Step>
</Steps>

## Examples

### Complete transform example

```vue HeroImage.vue theme={null}
<template>
  <ARImage
    src="hero.jpg"
    :width="1200"
    :height="800"
    alt="Hero image"
    :transformations="transform"
    :responsive="true"
    :lazy="true"
    class="hero-image"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ARImage } from '@autorender/vue/viewtag';
import type { TransformOptions } from '@autorender/js/viewtag';

const transform = ref<TransformOptions>({
  w: 1200,
  h: 800,
  fit: 'cover',
  ar: '16:9',
  position: 'center',

  improve: true,
  sharpen: 50,

  layers: [
    {
      type: 'image',
      imagePath: 'logo.png',
      width: 200,
      placement: 'north-east',
    }
  ],
  blend: 'overlay',
});
</script>
```

### Video component

```vue ProductVideo.vue theme={null}
<template>
  <ARVideo
    src="docs/skateboarding.mp4"
    :width="960"
    :height="540"
    :controls="true"
    preload="metadata"
    :transformations="{ w: 960, h: 540 }"
  />
</template>

<script setup lang="ts">
import { ARVideo } from '@autorender/vue/viewtag';
</script>
```

### Upload widget

The uploader runs in the browser, so pass the API key from `import.meta.env`. Never hardcode the key.

```vue Uploader.vue {9} theme={null}
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { createAutorenderUploader } from '@autorender/vue';
import type { UploaderInstance } from '@autorender/vue';
import '@autorender/vue/styles';

const containerRef = ref<HTMLDivElement | null>(null);
let uploader: UploaderInstance | null = null;

onMounted(() => {
  if (!containerRef.value) return;

  uploader = createAutorenderUploader(containerRef.value, {
    apiKey: import.meta.env.VITE_AUTORENDER_API_KEY,
    type: 'inline',
    allowMultiple: true,
    onSuccess: ({ files }) => console.log('Uploaded', files),
  });
});

onUnmounted(() => {
  uploader?.destroy();
});
</script>

<template>
  <div ref="containerRef" class="uploader-container"></div>
</template>
```

## API reference

### `autorenderVue(options?)`

Vite plugin for `@autorender/vue`. Import from `@autorender/vue/vite`.

**Options:**

* `videoShims?: boolean` — CJS interop shims for Video.js sub-modules (default `true`). Set `false` if you don't use `<ARVideo>`.

### `<ARImage />`

Vue component that wraps `<img>` with Autorender transformations.

**Props:**

* `src: string` — image source path (required)
* `width?: number` — image width in pixels
* `height?: number` — image height in pixels
* `alt?: string` — alt text
* `transformations?: TransformOptions` — transformation options
* `responsive?: boolean` — responsive images (default `true`)
* `lazy?: boolean` — lazy loading (default `true`)
* `sizes?: string` — `sizes` attribute for responsive images

### `<ARVideo />`

Vue component that renders a Video.js player with Autorender transformations. Requires the `autorenderVue()` Vite plugin.

**Props:** `src`, `width`, `height`, `controls`, `preload`, `transformations`

## Next steps

<CardGroup cols={2}>
  <Card title="Image transformations" icon="wand-magic-sparkles" iconType="solid" href="/docs/transformations/introduction">
    Every parameter you can pass to `transformations`.
  </Card>

  <Card title="Direct upload API" icon="cloud-arrow-up" iconType="solid" href="/docs/api-reference/direct-upload">
    The upload endpoint behind the widget.
  </Card>

  <Card title="Video transformations" icon="film" iconType="solid" href="/docs/video/introduction">
    Resize, trim, and thumbnail video for `<ARVideo>`.
  </Card>

  <Card title="All SDKs" icon="cubes" iconType="solid" href="/docs/resources/sdks">
    Front-end and backend SDKs for every stack.
  </Card>
</CardGroup>