Guides
Nuxt
Nuxt renders its own HTML, so the runtime arrives through a virtual module.
Nuxt builds on Vite, so the plugin still serves the runtime, the picks endpoint and the agent file.
What it cannot do is inject the script tag: transformIndexHtml is a Vite SPA hook, and Nuxt
renders the document itself.
The plugin therefore exposes a virtual module you import from a client-only file. One line, with the plugin's options already baked in.
Install
Terminal
pnpm add -D vite-plugin-quello
Configure
nuxt.config.ts
import quello from 'vite-plugin-quello'
export default defineNuxtConfig({
vite: {
plugins: [quello()],
},
})
plugins/quello.client.ts
export default defineNuxtPlugin(() => {
if (import.meta.dev) import('virtual:quello')
})
The .client suffix keeps it out of the server bundle, and import.meta.dev keeps it out of
production — where the virtual module resolves to an empty module.
On Nuxt 4 that plugin lives at app/plugins/quello.client.ts, since Nuxt 4 moved the
application into app/.
Nuxt 4 makes
app/ the Vite root. .quello/picks.json and AGENTS.md still land beside your
package.json, not inside app/: the plugin resolves them against the project root — the
nearest directory above Vite's root holding a package.json — because an agent is pointed at the
repository rather than at whichever directory the dev server serves.picksFile and agentFile are relative to that same project root, so nothing changes between the
two Nuxt majors.What a pick will know
Component name and source file, read from Nuxt's Vue internals:
{
"framework": {
"framework": "vue",
"component": "index",
"file": "/abs/path/pages/index.vue"
}
}
Running
vite-plugin-vue-devtools? It annotates
elements with the file, line and column. quello does not read that yet — it is
on the roadmap.