@pixelvault-dev/paste-vue

Vue 3 binding for @pixelvault-dev/paste. Adds paste-and-host (paste/drop an image → hosted CDN URL) to a textarea or input, as either a composable or a directive.

Composable

<script setup lang="ts">
import { ref } from "vue";
import { usePaste } from "@pixelvault-dev/paste-vue";

const field = ref<HTMLTextAreaElement | null>(null);
const { openFilePicker } = usePaste(field, { publishableKey: "pv_pub_xxxxxxxx" });
</script>

<template>
  <textarea ref="field" />
  <button @click="openFilePicker">Upload image</button>
</template>

usePaste returns { openFilePicker } — call it to open the OS file dialog and insert the chosen image(s).

Directive

<script setup lang="ts">
import { vPaste } from "@pixelvault-dev/paste-vue";
</script>

<template>
  <textarea v-paste="{ publishableKey: 'pv_pub_xxxxxxxx' }" />
</template>

Both attach on mount, re-attach if the element/options change, and detach on unmount. See @pixelvault-dev/paste for the full PasteOptions reference. Get a publishable key (pv_pub_…) in the PixelVault dashboard.

vue >= 3 is a peer dependency.