Use the vanilla SDK from any Vue setup function. No Vue-specific install needed.
The Usero SDK is framework-free. Initialize it once from your root component's onMounted hook, and the widget renders outside your Vue tree, so it cannot interfere with reactivity.
npm install @usero/sdk<script setup lang='ts'>
import { onBeforeUnmount, onMounted } from 'vue'
import { initUseroFeedbackWidget } from '@usero/sdk'
let widget: ReturnType<typeof initUseroFeedbackWidget> | null = null
onMounted(() => {
widget = initUseroFeedbackWidget({ clientId: 'YOUR_CLIENT_ID' })
})
onBeforeUnmount(() => {
widget?.destroy()
})
</script>
<template>
<router-view />
</template>Replace YOUR_CLIENT_ID with the id from your Usero dashboard.
Built for Vue 3
The vanilla SDK is what powers the React component too. No second package to install.
The widget mounts at the end of document.body, so Vue reactivity and Pinia stores never see it.
Initialize in onMounted, tear down in onBeforeUnmount. Clean, idiomatic Vue 3.
Only one named export is imported. Nothing from the React build is pulled in.
Featurebase publishes a Vue plugin that adds a global property. Usero needs neither a plugin nor a provider.
Verify
Run your dev server and open the app in the browser.
Confirm the feedback bubble appears bottom-right once the root component has mounted.
Click it and check the panel opens over your Vue UI.
Submit a test message and confirm the row shows up in your Usero inbox.
Check the console for SSR or hydration warnings tied to the init call.
Troubleshooting
initUseroFeedbackWidget touches the DOM, so it must run only in the browser. Call it inside onMounted, or guard it with if (import.meta.env.SSR === false). Never call it at the top level of <script setup>.
Nuxt server-renders by default. Wrap the call in <ClientOnly>, guard it with if (import.meta.client), or move it into a *.client.ts plugin so it never runs during SSR.
You are initializing on every render or without tearing down. Init once in onMounted and call widget?.destroy() in onBeforeUnmount so HMR replaces it cleanly.
You do not need to. The widget renders into its own DOM root outside the Vue tree, so wrapping it in ref or reactive does nothing useful. Pass plain values to the init call.
Import it from @usero/sdk (the vanilla entry), not @usero/sdk/react. Vue uses the framework-free build.
FAQ
No. The vanilla SDK works from any setup function. Vue, Nuxt, Quasar, and Ionic-Vue all use the same import.
No. The widget renders into its own DOM root, outside the app element, so it never enters Vue's reactivity graph.
Vue 2 is in maintenance mode. The vanilla SDK still works there too, just call initUseroFeedbackWidget in mounted().
Re-initialize the widget when the user logs in, passing metadata: { userId } to the init call.
Free tier. No credit card. Two-minute install. Cancel by deleting two lines of code.
Install guides