Vue Shadow Editor Component

Import createShadow and shadowListToCss from @getdom/studio/vue. Each layer has id, enabled, kind (drop, inset or ring), color, alpha (0–100), x, y, blur and spread in pixels. The editor emits new arrays and change events with { layers, css }. It never mutates your input array.

<script setup>
import { computed, ref } from 'vue';
import { DomShadowEditor, createShadow, shadowListToCss } from '@getdom/studio/vue';
const shadows = ref([createShadow()]);
const style = computed(() => ({ boxShadow: shadowListToCss(shadows.value) }));
</script>

<template>
	<DomShadowEditor v-model="shadows" />
	<div :style="style">Your HTML</div>
</template>

The editor updates shadow records. shadowListToCss serializes enabled records into a comma-separated CSS box-shadow value, in list order: the first shadow is painted on top. Drop shadows sit outside the box, inset shadows inside it, and rings use spread without an offset or blur. These are CSS box shadows, not the filter: drop-shadow effect that follows an image’s opaque pixels. Shadows do not change layout dimensions.

Bind the result to the element’s boxShadow style. No unique class or stage is required. Shadow record IDs identify rows in the editor; they are not CSS selectors. In the poster, the selected layer owns its shadows, and Vue applies the resulting inline style. z-index only determines layer stacking.