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 Code``Cursor``Windsurf``Copilot`
1. 1
**Copy the prompt**
The one big button below.
2. 2
**Paste it into your agent**
In your project — Claude Code, Cursor, etc.
3. 3
**Drop in your key**
Swap `pv_pub_REPLACE_ME` for a free key. Done.
Prompt for your coding agent Copy prompt
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
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 →](/signup)
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:
```
```
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 `
```
Not on Vue? There's a [React prompt](/prompts/react-image-paste), a [plain-HTML / script-tag prompt](/prompts/html-image-paste), and the full [options reference in the docs](/docs#paste).
## 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`](/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.