Copy-paste prompt · Vue

Add image paste to your Vue app in one prompt

GitHub lets you paste a screenshot into a comment and get a hosted link. Give your Vue app the same superpower — without building an upload backend. Copy the prompt below, paste it into your AI coding agent, and it wires it up.

Works with Claude CodeCursorWindsurfCopilot

1
Copy the prompt
The one big button below.
2
Paste it into your agent
In your project — Claude Code, Cursor, etc.
3
Drop in your key
Swap pv_pub_REPLACE_ME for a free key. Done.

Prompt for your coding agent

Add GitHub-style image paste-and-host to my Vue 3 app using PixelVault.

Context — read this first and use only the documented API:
- Overview + API: https://pixelvault.dev/llms.txt
- Package: @pixelvault-dev/paste-vue (exposes the `usePaste` composable and a `v-paste` directive)

Do this:
1. Install the package:
   npm install @pixelvault-dev/paste-vue

2. In the <script setup> component that holds my main <textarea> (must be a real
   <textarea> or <input> — NOT a contenteditable / rich-text editor), wire up
   usePaste exactly like this:

   <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_REPLACE_ME",
   });
   </script>

   <template>
     <textarea ref="field" />
     <!-- optional: <button type="button" @click="openFilePicker">Upload image</button> -->
   </template>

3. Result I want: when I paste or drag-drop an image into that textarea, it
   uploads to PixelVault and inserts markdown ![name](https://img.pixelvault.dev/…)
   into the field — the same flow as pasting a screenshot into a GitHub comment.

Rules:
- Use my publishable key where I wrote pv_pub_REPLACE_ME (I'll paste my own).
- Stick to the documented usePaste(field, options) composable (or the v-paste
  directive) — do NOT invent options, endpoints, or other packages.
- If my editor is contenteditable (TipTap, ProseMirror, Lexical, Quill), STOP
  and tell me — usePaste only attaches to a real textarea/input.
- Keep the change minimal and match my existing component's style.

What the agent will do

Install one package — @pixelvault-dev/paste-vue
Wire the usePaste composable (or v-paste directive) to your textarea
No backend changes — uploads go straight to PixelVault with your key
Nothing else in your app gets touched

Grab your free key

The one thing the agent can't generate is your publishable key (pv_pub_…) — it's origin-scoped and upload-only, safe to ship in browser code. Create one, add your app's origin, and paste it in.

Get your free key →

Free tier: 200 MB storage, 500 uploads/mo, 1 GB bandwidth. No card.

Prefer to wire it up yourself?

The prompt just automates the documented setup. By hand it's a few lines — install @pixelvault-dev/paste-vue and call the composable with a template ref:

<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" placeholder="Paste or drop an image…" />
  <button type="button" @click="openFilePicker">Upload image</button>
</template>

Prefer a directive? Import vPaste — Vue exposes it in templates as v-paste (register it globally with app.directive('paste', vPaste), or import it into <script setup>):

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

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

Not on Vue? There's a React prompt, a plain-HTML / script-tag prompt, and the full options reference in the docs.

Why a prompt instead of docs?

Because you probably weren't going to read the docs — you were going to tell your coding agent "add image paste" and hope it guessed our API. It won't guess right. This prompt points the agent at pixelvault.dev/llms.txt and the exact composable signature, so it generates correct, current code the first time instead of inventing endpoints that don't exist. Copy, paste, ship.

FAQ

How do I add image paste to a Vue textarea?

Copy the prompt above into your AI coding agent. It installs @pixelvault-dev/paste-vue and wires the usePaste composable (or v-paste directive) to your textarea so pasted or dropped images upload to PixelVault and insert a hosted markdown URL. Then create a free publishable key and swap it in for pv_pub_REPLACE_ME.

Do I need to build an upload backend?

No. Uploads go straight from the browser to PixelVault using an origin-scoped, upload-only publishable key. There's no server code to write and nothing to host yourself.

Which AI coding agents does this work with?

Any of them — Claude Code, Cursor, Windsurf, GitHub Copilot Chat, and similar. The prompt references pixelvault.dev/llms.txt for the live API, so the agent generates correct, current code regardless of which one you use.

Is the publishable key safe to put in browser code?

Yes — that's what it's designed for. A pv_pub_ key can only upload (never list, read, or delete) and only from the origins you allowlist. Keep your origin allowlist tight, and rotate the key if you ever see abuse.