Vue.js

Key type: use your workspace public key here. This code ships to the browser, where anyone can read the key, so it must be one that can only upload — which is exactly what the public key is. Copy it from API Keys in the dashboard; it is always visible there.A private key would also upload, but never put one in client-side code: it can read, rename, and delete everything in your workspace. See Create an API key.

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
Vue 3.0 or later, with Vite ^4 / ^5 / ^6 / ^7

Guide

Install the package.

npm install @autorender/vue

yarn add @autorender/vue

pnpm add @autorender/vue

bun add @autorender/vue

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

vite.config.ts

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:

vite.config.ts

plugins: [vue(), autorenderVue({ videoShims: false })],

Set up the provider.

App.vue

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

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

Render your first image.

ProductImage.vue

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

Examples

Complete transform example

HeroImage.vue

<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

ProductVideo.vue

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

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

Uploader.vue

<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

Image transformations

Every parameter you can pass to transformations.

Direct upload API

The upload endpoint behind the widget.

Video transformations

Resize, trim, and thumbnail video for <ARVideo>.

All SDKs

Front-end and backend SDKs for every stack.

Get started

Storage

Native (HTML)

Transformations

Optimization

Video

AI Tools

Resources

Prerequisites

Guide

Examples

Complete transform example

Video component

Upload widget

API reference

`autorenderVue(options?)`

`<ARImage />`

`<ARVideo />`

Next steps

Image transformations

Direct upload API

Video transformations

All SDKs

​Prerequisites

​Guide

​Examples

​Complete transform example

​Video component

​Upload widget

​API reference

​autorenderVue(options?)

​<ARImage />

​<ARVideo />

​Next steps

Image transformations

Direct upload API

Video transformations

All SDKs

Prerequisites

Guide

Examples

Complete transform example

Video component

Upload widget

API reference

`autorenderVue(options?)`

`<ARImage />`

`<ARVideo />`

Next steps