Vue Grab
Nov 2025; Apr 2026Chrome extension that extracts Vue component context for AI coding agents. Click a component in your running app and get props, state, stores, routes, and a DOM locator formatted for Claude Code or Cursor. Inspired by react-grab.
Click a component in your running Vue app and copy its props, state, stores, and route into a prompt. The idea came from react-grab. This is a Vue port but also on a different surface. React-grab is a dependency you install to your codebase and Vue Grab is a browser extension.
What it does
You click a component in your running Vue app and get back a structured context block:
- Component state. Reactive data, computed properties, refs, props with types.
- Stores. Pinia, Vuex, or Vue Query state snapshots.
- Component tree. The path from root to the selected node.
- Route. Current Vue Router location.
- DOM locator. A stable selector you can hand back to a browser-control tool.
That block is formatted for an LLM and copied to the clipboard. Paste it into Claude Code, Cursor, ChatGPT, or anything that takes text.
How it’s built
Standard Manifest V3 architecture with three contexts that have to talk to each other:
- Background service worker. Handles the keyboard shortcut and content-script injection.
- Content script (isolated world). Renders the Lit-based UI overlay and manages hover-to-highlight, click-to-grab, and the component tree navigator.
- Injected script (main world). Walks Vue’s internals - Vue 3 (
__vueParentComponent,__vnode, devtools hook) and Vue 2 (__vue__,$children,$options).
Most of the depth lives in the injected script. The component a user clicks is often nested below framework wrappers like NuxtPage, RouterView, Suspense, and Transition, so the walk has to step transparently past those to find the real one. Vue 3 fragments, Suspense active branches, and slot functions all need explicit handling.
Tech
TypeScript, Vite, Lit web components for the overlay UI, Chrome Extension Manifest V3, Vue 2 and Vue 3 runtime introspection.