Guides
Vite
Vue, React, Svelte and Solid single-page apps — the shortest setup.
This is the easy path: the plugin injects the script tag itself, and there is nothing else to do.
If your framework renders its own HTML — Nuxt, SvelteKit, Astro — the injection hook is never called and you need one extra line.
Install
Terminal
pnpm add -D vite-plugin-quello
Configure
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import quello from 'vite-plugin-quello'
export default defineConfig({
plugins: [vue(), quello()],
})
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import quello from 'vite-plugin-quello'
export default defineConfig({
plugins: [react(), quello()],
})
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import quello from 'vite-plugin-quello'
export default defineConfig({
plugins: [svelte(), quello()],
})
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
import quello from 'vite-plugin-quello'
export default defineConfig({
plugins: [solid(), quello()],
})
Start the dev server and press Alt+Q.
What a pick will know
| Component | File | Line | |
|---|---|---|---|
| Vue | ✅ | ✅ | — |
| React | ✅ | ✅ | ✅¹ |
| Svelte | ✅ | ✅ | ✅ + column |
| Solid | — | — | — |
¹ React's source location comes from the JSX compiler, not from React. Vite's Babel development transform annotates it; SWC does not.
Solid compiles its reactivity away, so at runtime there is no component instance to find. Picks still carry the selector, DOM path and text, which is enough for an agent to locate the code.
The plugin takes options for the shortcut, the outline colours, how much HTML each pick carries and
which agent file to write.
Production
The plugin is apply: 'serve'. A production build never sees it, and there is nothing to strip.