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

Guide

1. Install the package.

   npm

   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 })],
   
2. 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>
   

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

Upload widget

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.