Integration Guide

Add ImageLayer to Vue

Import the widget, mark image-layer as a custom element in the Vue build configuration, and assign the publishable key and server-issued session token as properties.

Quick start

Install

npm install @imagelayer/widget

Embed

vue

<template>
  <image-layer
    id="imagelayer-widget"
    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 workspace context

Add approved assets, colors, and optional guidance. Generated drafts still require review.

Embed and authenticate

Load the component in your Vue app and have your backend issue a tenant-scoped session token.

Admit eligible requests

Users can submit image, video, standalone audio, or text only when the current catalog, entitlement, credits, spend controls, provider, and billing mode allow it.

Plan the product workflow

Follow the end-to-end app integration tutorial.Review the REST API for session and generation flows.Match the embed to a social, commerce, content, or internal workflow.

Start building with Vue

Create a workspace to configure the widget and server-minted session tokens. No generation credits are included with the Free workspace.

Create Workspace