Guides
Astro
Astro builds on Vite; the runtime arrives through the virtual module.
Astro uses Vite, so the plugin serves everything it normally serves. The document is Astro's own, so the runtime comes in through the virtual module.
Install
Terminal
pnpm add -D vite-plugin-quello
Configure
astro.config.mjs
import { defineConfig } from 'astro/config'
import quello from 'vite-plugin-quello'
export default defineConfig({
vite: { plugins: [quello()] },
})
src/layouts/BaseLayout.astro
<html lang="en">
<body>
<slot />
{import.meta.env.DEV && <script>import('virtual:quello')</script>}
</body>
</html>
Put it in whichever layout your pages share, so every page gets it.
What a pick will know
On a static Astro page: the selector, the DOM path and the text — no component name.
That is not a limitation quello can lift. A static page ships no framework runtime, so there is no component instance on the DOM to read. It is enough for an agent to find the code: the selector and the text are usually more than a grep needs.
Astro does emit
data-astro-source-file attributes, but its dev toolbar strips them from the DOM
as it loads, and disabling the toolbar stops them being emitted at all. They are that tool's private
detail rather than an API, so quello does not rely on them.Islands are different: an interactive Vue, React or Svelte island carries its framework's runtime, so picks inside one report a component like they would anywhere else.