Install · Vue

Bug reports and feedback from your Vue site, in one script tag.

Add a Vue feedback widget and bug report button with one script tag in index.html. No plugin to register, no build step, nothing in your bundle.
Start freeNo credit card required.

Where it goes

In index.html at the root of your Vite project, just before the closing body tag and after the #app div.

Setup

Adding the widget to Vue

  1. 01

    Copy your widget key

    From the Widget tab of your project in UserWants. The key begins with uw_pk_ and is meant to be public — it ships in your HTML, and the domain allowlist rather than secrecy is what stops it being used elsewhere.

  2. 02

    Add the tag to index.html

    Vue projects keep a single HTML entry at the project root. The tag goes there, not in a component and not in main.js, so it loads once and is unaffected by anything the app mounts or unmounts.

    html
    <!-- index.html -->
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
  <script
    src="https://userwants.app/widget.js"
    data-userwants-key="uw_pk_..."
    defer
  ></script>
</body>
  3. 03

    Allow your domain

    Add your production hostname under Allowed domains in the Widget tab. Until you do, the widget runs on localhost only. An empty list fails closed on purpose, so a key that leaks into a public repository is not a working button on someone else’s site.

  4. 04

    Identify signed-in users

    If you have a session, pass the id you already hold and the widget stops asking for an email. A watcher on your auth store is the natural place, so it fires again when the person logs out and back in.

    js
    import { watch } from 'vue';

watch(() => auth.user, (user) => {
  if (!user) return;
  window.UserWants?.identify({
    identifier: user.id,
    name: user.name,
    email: user.email
  });
}, { immediate: true });

Worth knowing

What bites on Vue

The things that are specific to a JavaScript framework, rather than true of every install.

  • Nuxt is a different placement

    On Nuxt, add it through the app.head.script array in nuxt.config, not by editing an HTML file — there is no index.html to edit. Everything else on this page applies unchanged.

  • A script tag inside a template will not run

    Vue templates are compiled to render functions, and a script element produced that way is created but never executed by the browser. Keep the tag in the HTML shell.

  • Scoped styles cannot reach it

    The widget lives in a closed shadow root, so neither your scoped CSS nor a global reset touches it, and it cannot touch your styles either.

FAQ

Questions

Do I need a Vue plugin or composable to use it?
No. There is nothing to register with app.use and nothing to import. The widget attaches itself to the document when the script runs, and the only API you might call is window.UserWants.identify for signed-in users.
Will the widget interfere with Vue reactivity or hydration?
No. It renders into an element it appends to the body inside a closed shadow root, which Vue never patches and never sees. Server-rendered markup and the client hydration pass are both unaffected.

The full reference — every field the widget collects, the domain allowlist rules and the JavaScript API — is in the widget docs.

Try it on your Vue site.

Paste the tag, add your domain, and the next report arrives with the screenshot and the JavaScript error already attached.

Start freeRead the docs