Installation
There are four ways in, and which one you need depends on your builder, not your framework.
Vite
pnpm add -D vite-plugin-quello
import { defineConfig } from 'vite'
import quello from 'vite-plugin-quello'
export default defineConfig({
plugins: [quello()],
})
Start your dev server. That is the whole setup for a Vite SPA — the script tag is injected for you.
Frameworks that render their own HTML (Nuxt, SvelteKit, Astro) need one extra line, because the hook that injects the tag is never called there.
webpack
pnpm add -D webpack-plugin-quello
import QuelloWebpackPlugin from 'webpack-plugin-quello'
export default {
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new QuelloWebpackPlugin(),
],
devServer: { port: 3000 },
}
Next
pnpm add -D @quello/next
import { withQuello } from '@quello/next/config'
export default withQuello({
// your config, untouched
})
import { Quello } from '@quello/next'
// …inside <body>, once
<Quello />
On the next next dev, withQuello writes the route handler, the agent file and the .gitignore
entry, then prints where each went. See the Next guide.
No bundler quello can hook into
Angular, a Rails or Laravel app, three HTML files in a folder — anything that will not take a plugin. Run quello beside it:
npx quello-cli
It prints the tag to paste into your page:
<script defer src="http://127.0.0.1:5100/__quello/client.js"
data-quello-endpoint="http://127.0.0.1:5100/__quello/picks"></script>
Check it worked
Open your app. A small quello pill should be sitting in the bottom-right corner. Press Alt+Q,
click something, and a .quello/picks.json file should appear in your project.
.quello/ to your .gitignore. It describes your current browser session, not your project.