Vue · Svelte
Drive the headless core engine from any framework and render your own UI.
The React widget is just one consumer of @wcgw/vibe-check-core. The engine is
framework-agnostic and has zero runtime dependencies, so in Vue, Svelte, Solid,
Angular — or anything else — you drive the engine yourself and render (or don't
render) your own UI. The pattern is always: start() on mount, subscribe,
stop() on unmount.
Vue
<!-- VibeMeter.vue -->
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { VibeCheckEngine, type VibeSnapshot } from '@wcgw/vibe-check-core'
const fps = ref(0)
const issueCount = ref(0)
let engine: VibeCheckEngine | null = null
let unsubscribe: (() => void) | null = null
onMounted(() => {
engine = new VibeCheckEngine({ beaconUrl: 'http://127.0.0.1:4200', projectId: 'my-project' })
unsubscribe = engine.onSnapshot((snap: VibeSnapshot) => {
fps.value = snap.frameRate.fps
issueCount.value = snap.issues.length
})
engine.start()
})
onUnmounted(() => {
unsubscribe?.()
engine?.stop()
})
</script>
<template>
<div>{{ fps }} fps · {{ issueCount }} issues</div>
</template>Svelte
<!-- VibeMeter.svelte -->
<script lang="ts">
import { onMount } from 'svelte'
import { VibeCheckEngine, type VibeSnapshot } from '@wcgw/vibe-check-core'
let fps = 0
let issueCount = 0
onMount(() => {
const engine = new VibeCheckEngine({ beaconUrl: 'http://127.0.0.1:4200', projectId: 'my-project' })
const unsubscribe = engine.onSnapshot((snap: VibeSnapshot) => {
fps = snap.frameRate.fps
issueCount = snap.issues.length
})
engine.start()
// onMount's return runs on unmount
return () => {
unsubscribe()
engine.stop()
}
})
</script>
<div>{fps} fps · {issueCount} issues</div>Always pair start() with stop()
The engine installs PerformanceObservers and patches console/fetch.
Skipping stop() on unmount leaks observers and leaves the patches installed.
Call unsubscribe() then engine.stop() in your framework's teardown hook.
Render nothing (beacon-only)
You don't need any UI to feed your agent. Give the engine a beaconUrl, start
it, and let it POST snapshots on its own — see the
Vanilla / headless guide. The
engine feature-detects browser APIs and silently skips collectors the host
doesn't support, so the same code is safe everywhere.