Vite

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

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

¹ The line follows the React version, not Vite. React ≤ 18 carries it in _debugSource, which the JSX compiler's development transform emits. React 19 removed _debugSource in favour of owner stacks, which yield the file but not a line quello can trust — see Compatibility.

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.

Production

A production build gets nothing from the plugin — no script tag, no quello code — so there is nothing to strip. It stays loaded only to resolve virtual:quello to an empty module, which a build needs because the dev guard around that import is a runtime check.