Chrome extension that extracts Vue component context for AI coding agents. Click a component in your running app and get its props, state, stores, routes, and DOM locators — ready to paste into Claude Code, Cursor, or any clipboard workflow.
- Props, data, computed, and refs (Composition API & Options API)
- Pinia, Vuex, and Vue Query store state, getters, and actions
- Vue Router params, query, meta, and matched routes
- CSS selectors, XPath, bounding box, and page URL
- Component hierarchy with parent/child navigation
- Provide/inject values, emitted events, and slots
git clone https://github.com/estern1011/vue-grab.git
cd vue-grab && npm install && npm run buildThen in Chrome: chrome://extensions → Enable Developer Mode → Load Unpacked → select the dist/ folder.
- Press
Alt+Shift+V(or click the extension icon) on any Vue app - Hover to see component names, click to grab
- Navigate the component tree with
Alt+Up/Down - Add comments per component, multi-select as many as you need
- Copy all to clipboard or send directly to Cursor via deep link
vue-grab/
├── src/
│ ├── background.ts # Service worker
│ ├── content.ts # Content script — overlay & grab UI
│ ├── content.css # Highlight & toast styles
│ ├── popup.ts # Extension popup
│ ├── popup.html # Popup UI
│ ├── injected/ # Runs in page context
│ │ ├── index.ts # Entry — bridges to content script
│ │ ├── detection.ts # Vue instance detection
│ │ ├── extraction.ts # Component data extraction
│ │ ├── stores.ts # Pinia/Vuex/Vue Query extraction
│ │ ├── features.ts # Router, provide/inject, slots, events
│ │ ├── serialization.ts # Safe serialization with depth limits
│ │ └── types.ts # Shared types
│ ├── constants.ts
│ ├── types.ts
│ └── global.d.ts
├── site/ # Demo site (Nuxt)
├── manifest.json
└── package.json
npm run build # Build extension to dist/
npm run dev # Watch mode — rebuilds on file changesMIT