[{"data":1,"prerenderedAt":735},["ShallowReactive",2],{"navigation_docs":3,"-guides-vite":113,"-guides-vite-surround":730},[4,31,77,108],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Using the picker","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-mouse-pointer-click",{"title":26,"path":27,"stem":28,"icon":29},"Resolving picks","\u002Fgetting-started\u002Fresolve-the-picks","1.getting-started\u002F4.resolve-the-picks","i-lucide-bot",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[37,42,47,52,57,62,67,72],{"title":38,"path":39,"stem":40,"icon":41},"Vite","\u002Fguides\u002Fvite","2.guides\u002F1.vite","i-simple-icons-vite",{"title":43,"path":44,"stem":45,"icon":46},"Nuxt","\u002Fguides\u002Fnuxt","2.guides\u002F2.nuxt","i-simple-icons-nuxtdotjs",{"title":48,"path":49,"stem":50,"icon":51},"SvelteKit","\u002Fguides\u002Fsveltekit","2.guides\u002F3.sveltekit","i-simple-icons-svelte",{"title":53,"path":54,"stem":55,"icon":56},"Astro","\u002Fguides\u002Fastro","2.guides\u002F4.astro","i-simple-icons-astro",{"title":58,"path":59,"stem":60,"icon":61},"Next.js","\u002Fguides\u002Fnext","2.guides\u002F5.next","i-simple-icons-nextdotjs",{"title":63,"path":64,"stem":65,"icon":66},"webpack","\u002Fguides\u002Fwebpack","2.guides\u002F6.webpack","i-simple-icons-webpack",{"title":68,"path":69,"stem":70,"icon":71},"Angular","\u002Fguides\u002Fangular","2.guides\u002F7.angular","i-simple-icons-angular",{"title":73,"path":74,"stem":75,"icon":76},"Plain HTML & more","\u002Fguides\u002Fvanilla","2.guides\u002F8.vanilla","i-lucide-file-code",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":30},"Reference","i-lucide-list","\u002Freference","3.reference",[83,88,93,98,103],{"title":84,"path":85,"stem":86,"icon":87},"Compatibility","\u002Freference\u002Fcompatibility","3.reference\u002F1.compatibility","i-lucide-table",{"title":89,"path":90,"stem":91,"icon":92},"Plugin options","\u002Freference\u002Fplugin-options","3.reference\u002F2.plugin-options","i-lucide-settings-2",{"title":94,"path":95,"stem":96,"icon":97},"CLI","\u002Freference\u002Fcli","3.reference\u002F3.cli","i-lucide-terminal",{"title":99,"path":100,"stem":101,"icon":102},"The pick object","\u002Freference\u002Fpick-object","3.reference\u002F4.pick-object","i-lucide-braces",{"title":104,"path":105,"stem":106,"icon":107},"FAQ & troubleshooting","\u002Freference\u002Ffaq","3.reference\u002F5.faq","i-lucide-help-circle",{"title":109,"path":110,"stem":111,"icon":112},"Sponsor","\u002Fsponsor","4.sponsor","i-lucide-heart",{"id":114,"title":38,"body":115,"description":723,"extension":724,"links":725,"meta":726,"navigation":727,"path":39,"seo":728,"stem":40,"__hash__":729},"docs\u002F2.guides\u002F1.vite.md",{"type":116,"value":117,"toc":717},"minimark",[118,122,130,135,165,169,604,610,614,692,695,698,702,706,713],[119,120,121],"p",{},"This is the easy path: the plugin injects the script tag itself, and there is nothing else to do.",[119,123,124,125,129],{},"If your framework renders its own HTML — Nuxt, SvelteKit, Astro — the injection hook is never\ncalled and you need ",[126,127,128],"a",{"href":44},"one extra line",".",[131,132,134],"h2",{"id":133},"install","Install",[136,137,143],"pre",{"className":138,"code":139,"filename":140,"language":141,"meta":142,"style":142},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add -D vite-plugin-quello\n","Terminal","bash","",[144,145,146],"code",{"__ignoreMap":142},[147,148,151,155,159,162],"span",{"class":149,"line":150},"line",1,[147,152,154],{"class":153},"sBMFI","pnpm",[147,156,158],{"class":157},"sfazB"," add",[147,160,161],{"class":157}," -D",[147,163,164],{"class":157}," vite-plugin-quello\n",[131,166,168],{"id":167},"configure","Configure",[170,171,172,309,406,507],"code-group",{},[136,173,178],{"className":174,"code":175,"filename":176,"language":177,"meta":142,"style":142},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineConfig } from 'vite'\nimport vue from '@vitejs\u002Fplugin-vue'\nimport quello from 'vite-plugin-quello'\n\nexport default defineConfig({\n  plugins: [vue(), quello()],\n})\n","Vue","ts",[144,179,180,209,227,244,251,269,300],{"__ignoreMap":142},[147,181,182,186,190,194,197,200,203,206],{"class":149,"line":150},[147,183,185],{"class":184},"s7zQu","import",[147,187,189],{"class":188},"sMK4o"," {",[147,191,193],{"class":192},"sTEyZ"," defineConfig",[147,195,196],{"class":188}," }",[147,198,199],{"class":184}," from",[147,201,202],{"class":188}," '",[147,204,205],{"class":157},"vite",[147,207,208],{"class":188},"'\n",[147,210,212,214,217,220,222,225],{"class":149,"line":211},2,[147,213,185],{"class":184},[147,215,216],{"class":192}," vue ",[147,218,219],{"class":184},"from",[147,221,202],{"class":188},[147,223,224],{"class":157},"@vitejs\u002Fplugin-vue",[147,226,208],{"class":188},[147,228,230,232,235,237,239,242],{"class":149,"line":229},3,[147,231,185],{"class":184},[147,233,234],{"class":192}," quello ",[147,236,219],{"class":184},[147,238,202],{"class":188},[147,240,241],{"class":157},"vite-plugin-quello",[147,243,208],{"class":188},[147,245,247],{"class":149,"line":246},4,[147,248,250],{"emptyLinePlaceholder":249},true,"\n",[147,252,254,257,260,263,266],{"class":149,"line":253},5,[147,255,256],{"class":184},"export",[147,258,259],{"class":184}," default",[147,261,193],{"class":262},"s2Zo4",[147,264,265],{"class":192},"(",[147,267,268],{"class":188},"{\n",[147,270,272,276,279,282,285,288,291,294,297],{"class":149,"line":271},6,[147,273,275],{"class":274},"swJcz","  plugins",[147,277,278],{"class":188},":",[147,280,281],{"class":192}," [",[147,283,284],{"class":262},"vue",[147,286,287],{"class":192},"()",[147,289,290],{"class":188},",",[147,292,293],{"class":262}," quello",[147,295,296],{"class":192},"()]",[147,298,299],{"class":188},",\n",[147,301,303,306],{"class":149,"line":302},7,[147,304,305],{"class":188},"}",[147,307,308],{"class":192},")\n",[136,310,313],{"className":174,"code":311,"filename":312,"language":177,"meta":142,"style":142},"import { defineConfig } from 'vite'\nimport react from '@vitejs\u002Fplugin-react'\nimport quello from 'vite-plugin-quello'\n\nexport default defineConfig({\n  plugins: [react(), quello()],\n})\n","React",[144,314,315,333,349,363,367,379,400],{"__ignoreMap":142},[147,316,317,319,321,323,325,327,329,331],{"class":149,"line":150},[147,318,185],{"class":184},[147,320,189],{"class":188},[147,322,193],{"class":192},[147,324,196],{"class":188},[147,326,199],{"class":184},[147,328,202],{"class":188},[147,330,205],{"class":157},[147,332,208],{"class":188},[147,334,335,337,340,342,344,347],{"class":149,"line":211},[147,336,185],{"class":184},[147,338,339],{"class":192}," react ",[147,341,219],{"class":184},[147,343,202],{"class":188},[147,345,346],{"class":157},"@vitejs\u002Fplugin-react",[147,348,208],{"class":188},[147,350,351,353,355,357,359,361],{"class":149,"line":229},[147,352,185],{"class":184},[147,354,234],{"class":192},[147,356,219],{"class":184},[147,358,202],{"class":188},[147,360,241],{"class":157},[147,362,208],{"class":188},[147,364,365],{"class":149,"line":246},[147,366,250],{"emptyLinePlaceholder":249},[147,368,369,371,373,375,377],{"class":149,"line":253},[147,370,256],{"class":184},[147,372,259],{"class":184},[147,374,193],{"class":262},[147,376,265],{"class":192},[147,378,268],{"class":188},[147,380,381,383,385,387,390,392,394,396,398],{"class":149,"line":271},[147,382,275],{"class":274},[147,384,278],{"class":188},[147,386,281],{"class":192},[147,388,389],{"class":262},"react",[147,391,287],{"class":192},[147,393,290],{"class":188},[147,395,293],{"class":262},[147,397,296],{"class":192},[147,399,299],{"class":188},[147,401,402,404],{"class":149,"line":302},[147,403,305],{"class":188},[147,405,308],{"class":192},[136,407,410],{"className":174,"code":408,"filename":409,"language":177,"meta":142,"style":142},"import { defineConfig } from 'vite'\nimport { svelte } from '@sveltejs\u002Fvite-plugin-svelte'\nimport quello from 'vite-plugin-quello'\n\nexport default defineConfig({\n  plugins: [svelte(), quello()],\n})\n","Svelte",[144,411,412,430,450,464,468,480,501],{"__ignoreMap":142},[147,413,414,416,418,420,422,424,426,428],{"class":149,"line":150},[147,415,185],{"class":184},[147,417,189],{"class":188},[147,419,193],{"class":192},[147,421,196],{"class":188},[147,423,199],{"class":184},[147,425,202],{"class":188},[147,427,205],{"class":157},[147,429,208],{"class":188},[147,431,432,434,436,439,441,443,445,448],{"class":149,"line":211},[147,433,185],{"class":184},[147,435,189],{"class":188},[147,437,438],{"class":192}," svelte",[147,440,196],{"class":188},[147,442,199],{"class":184},[147,444,202],{"class":188},[147,446,447],{"class":157},"@sveltejs\u002Fvite-plugin-svelte",[147,449,208],{"class":188},[147,451,452,454,456,458,460,462],{"class":149,"line":229},[147,453,185],{"class":184},[147,455,234],{"class":192},[147,457,219],{"class":184},[147,459,202],{"class":188},[147,461,241],{"class":157},[147,463,208],{"class":188},[147,465,466],{"class":149,"line":246},[147,467,250],{"emptyLinePlaceholder":249},[147,469,470,472,474,476,478],{"class":149,"line":253},[147,471,256],{"class":184},[147,473,259],{"class":184},[147,475,193],{"class":262},[147,477,265],{"class":192},[147,479,268],{"class":188},[147,481,482,484,486,488,491,493,495,497,499],{"class":149,"line":271},[147,483,275],{"class":274},[147,485,278],{"class":188},[147,487,281],{"class":192},[147,489,490],{"class":262},"svelte",[147,492,287],{"class":192},[147,494,290],{"class":188},[147,496,293],{"class":262},[147,498,296],{"class":192},[147,500,299],{"class":188},[147,502,503,505],{"class":149,"line":302},[147,504,305],{"class":188},[147,506,308],{"class":192},[136,508,511],{"className":174,"code":509,"filename":510,"language":177,"meta":142,"style":142},"import { defineConfig } from 'vite'\nimport solid from 'vite-plugin-solid'\nimport quello from 'vite-plugin-quello'\n\nexport default defineConfig({\n  plugins: [solid(), quello()],\n})\n","Solid",[144,512,513,531,547,561,565,577,598],{"__ignoreMap":142},[147,514,515,517,519,521,523,525,527,529],{"class":149,"line":150},[147,516,185],{"class":184},[147,518,189],{"class":188},[147,520,193],{"class":192},[147,522,196],{"class":188},[147,524,199],{"class":184},[147,526,202],{"class":188},[147,528,205],{"class":157},[147,530,208],{"class":188},[147,532,533,535,538,540,542,545],{"class":149,"line":211},[147,534,185],{"class":184},[147,536,537],{"class":192}," solid ",[147,539,219],{"class":184},[147,541,202],{"class":188},[147,543,544],{"class":157},"vite-plugin-solid",[147,546,208],{"class":188},[147,548,549,551,553,555,557,559],{"class":149,"line":229},[147,550,185],{"class":184},[147,552,234],{"class":192},[147,554,219],{"class":184},[147,556,202],{"class":188},[147,558,241],{"class":157},[147,560,208],{"class":188},[147,562,563],{"class":149,"line":246},[147,564,250],{"emptyLinePlaceholder":249},[147,566,567,569,571,573,575],{"class":149,"line":253},[147,568,256],{"class":184},[147,570,259],{"class":184},[147,572,193],{"class":262},[147,574,265],{"class":192},[147,576,268],{"class":188},[147,578,579,581,583,585,588,590,592,594,596],{"class":149,"line":271},[147,580,275],{"class":274},[147,582,278],{"class":188},[147,584,281],{"class":192},[147,586,587],{"class":262},"solid",[147,589,287],{"class":192},[147,591,290],{"class":188},[147,593,293],{"class":262},[147,595,296],{"class":192},[147,597,299],{"class":188},[147,599,600,602],{"class":149,"line":302},[147,601,305],{"class":188},[147,603,308],{"class":192},[119,605,606,607,129],{},"Start the dev server and press ",[144,608,609],{},"Alt+Q",[131,611,613],{"id":612},"what-a-pick-will-know","What a pick will know",[615,616,617,635],"table",{},[618,619,620],"thead",{},[621,622,623,626,629,632],"tr",{},[624,625],"th",{},[624,627,628],{},"Component",[624,630,631],{},"File",[624,633,634],{},"Line",[636,637,638,654,667,680],"tbody",{},[621,639,640,646,649,651],{},[641,642,643],"td",{},[644,645,176],"strong",{},[641,647,648],{},"✅",[641,650,648],{},[641,652,653],{},"—",[621,655,656,660,662,664],{},[641,657,658],{},[644,659,312],{},[641,661,648],{},[641,663,648],{},[641,665,666],{},"✅¹",[621,668,669,673,675,677],{},[641,670,671],{},[644,672,409],{},[641,674,648],{},[641,676,648],{},[641,678,679],{},"✅ + column",[621,681,682,686,688,690],{},[641,683,684],{},[644,685,510],{},[641,687,653],{},[641,689,653],{},[641,691,653],{},[119,693,694],{},"¹ React's source location comes from the JSX compiler, not from React. Vite's Babel development\ntransform annotates it; SWC does not.",[119,696,697],{},"Solid compiles its reactivity away, so at runtime there is no component instance to find. Picks\nstill carry the selector, DOM path and text, which is enough for an agent to locate the code.",[699,700,701],"tip",{"to":90},"The plugin takes options for the shortcut, the outline colours, how much HTML each pick carries and\nwhich agent file to write.",[131,703,705],{"id":704},"production","Production",[119,707,708,709,712],{},"The plugin is ",[144,710,711],{},"apply: 'serve'",". A production build never sees it, and there is nothing to strip.",[714,715,716],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":142,"searchDepth":211,"depth":211,"links":718},[719,720,721,722],{"id":133,"depth":211,"text":134},{"id":167,"depth":211,"text":168},{"id":612,"depth":211,"text":613},{"id":704,"depth":211,"text":705},"Vue, React, Svelte and Solid single-page apps — the shortest setup.","md",null,{},{"icon":41},{"title":38,"description":723},"dXOaezLt06hEj6VgbFmq8iBjjA-U-6BxQijksg19DBs",[731,733],{"title":26,"path":27,"stem":28,"description":732,"icon":29,"children":-1},"The loop — pick, annotate, hand the whole lot to your agent.",{"title":43,"path":44,"stem":45,"description":734,"icon":46,"children":-1},"Nuxt renders its own HTML, so the runtime arrives through a virtual module.",1788454296030]