Integration Guide

Add ImageLayer to Vue

Vue supports Web Components out of the box. Import the widget, mark it as a custom element in your Vite config, and drop the tag into any .vue file. Reactive props work as expected for image, video, voice, and text workflows.

Quick start

Install

npm install @imagelayer/widget

Embed

vue

<template>
  <image-layer
    api-key="il_live_your_key_here"
    api-url="https://api.imagelayer.app"
  />
</template>

<script setup>
import '@imagelayer/widget';
</script>

Configuration note

Add this to your vite.config.ts to suppress Vue's component resolution warning: vue({ template: { compilerOptions: { isCustomElement: (tag) => tag === 'image-layer' } } })

Why Vue + ImageLayer

Native Web Component handling

Vue 3 recognizes custom elements natively. One compiler option tells Vue to skip component resolution for the image-layer tag.

Works with Nuxt

Same setup works in Nuxt — client-side only. Wrap in <ClientOnly> if using SSR and the widget renders after hydration.

Reactive prop binding

Bind api-key dynamically with v-bind. Switch keys based on environment, user, or tenant without remounting the widget.

How it works

Set up your brand kit

Upload logo, pick colors, set AI brand guidelines. Five minutes.

Embed the widget

Drop one <image-layer> tag into your Vue app. That's the entire integration.

Your users start creating

Users open one embedded workflow and generate on-brand images, video, voiceovers, or text inside your product.

Start building with Vue

Free plan. No credit card. Most teams go live in under 15 minutes.

Embed Your First Widget Free