Guides
SvelteKit
Same route as Nuxt — the plugin plus one import.
SvelteKit renders its own document, so the runtime arrives through the virtual module rather than an injected tag — exactly as with Nuxt.
Install
Terminal
pnpm add -D vite-plugin-quello
Configure
vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
import quello from 'vite-plugin-quello'
export default defineConfig({
plugins: [sveltekit(), quello()],
})
src/routes/+layout.svelte
<script lang="ts">
import { onMount } from 'svelte'
import { dev } from '$app/environment'
let { children } = $props()
onMount(() => {
if (dev) import('virtual:quello')
})
</script>
{@render children()}
onMount only runs in the browser, and dev keeps it out of production builds.
What a pick will know
Svelte's development build annotates every element it creates with __svelte_meta, which carries
the most precise location of any framework quello supports:
{
"framework": {
"framework": "svelte",
"component": "+page",
"file": "src/routes/+page.svelte",
"line": 22,
"column": 6
}
}