A Vue port of React Grab by Aiden Bai
Grab any element in your Vue app and give it to Cursor, Claude Code, etc. to change.
By default coding agents cannot access elements on your page. Vue Grab fixes this - just point and click to provide context!
- Hold ⌘C and click on any element on your page
- Works with Cursor, Claude Code, OpenCode
- Just a single script tag (it's just JavaScript!)
- Shows Vue component hierarchy and file paths
Get started in 1 minute by adding this script tag to your app:
<script
src="//unpkg.com/vue-grab/dist/index.global.js"
crossorigin="anonymous"
data-enabled="true"
></script>If you're using a Vue framework or build tool, view instructions below:
- Run
npm i vue-grab@latest - Add this to your
vite.config.ts:
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { vueGrab } from "vue-grab/plugins/vite";
export default defineConfig({
plugins: [vue(), vueGrab()],
});Add this inside of your app.vue or layout file:
<template>
<div>
<Head>
<Script
v-if="isDev"
src="//unpkg.com/vue-grab/dist/index.global.js"
crossorigin="anonymous"
data-enabled="true"
/>
</Head>
<NuxtPage />
</div>
</template>
<script setup>
const isDev = process.env.NODE_ENV === "development";
</script>Vue Grab works by:
- Listening for a keyboard shortcut (default: Cmd+C held for 500ms)
- Showing an overlay on elements you hover over
- When you click, it grabs the element's HTML structure and Vue component information
- Copies it to your clipboard in a format optimized for AI coding assistants
- Optionally opens Cursor or other tools with the context
You can configure Vue Grab with data attributes:
<script
src="//unpkg.com/vue-grab/dist/index.global.js"
crossorigin="anonymous"
data-enabled="true"
data-adapter="cursor"
data-hotkey="Meta,G"
data-key-hold-duration="300"
></script>Or programmatically:
import { init } from "vue-grab";
init({
enabled: true,
adapter: cursorAdapter,
hotkey: ["Meta", "G"],
keyHoldDuration: 300,
});This monorepo contains the vue-grab library and a kitchen-sink demo app.
pnpm install
pnpm --filter vue-grab buildpnpm --filter kitchen-sink devThen open your browser to http://localhost:5173 (or the URL shown in terminal). Hold ⌘C for 500ms and click on any element to test vue-grab!
Find a bug? Head over to our issue tracker and we'll do our best to help. We love pull requests, too!
Vue Grab is inspired by and adapted from React Grab by Aiden Bai.
Vue Grab is MIT-licensed open-source software.