Vue

Add an AI support assistant to a Vue or Nuxt app

One component with one prop, or two lines in index.html. Either way the widget itself never enters your bundle.

One component
About two minutes
One file

pnpm add @matterchat/vue

App.vuefile

<script setup>import { MatterChat } from "@matterchat/vue";</script> <template>  <!-- your app -->  <MatterChat public-key="bot_your_key" /></template>

vue · render it once

Where the component goes

Install @matterchat/vue and render <MatterChat public-key=... /> once in App.vue. It renders nothing and does all of its work in onMounted, so it is safe to import in a Nuxt app — wrap it in <ClientOnly> and it stays out of the server render entirely. If you would rather add nothing to package.json, the plain script tag still works: index.html for a Vite app, or app.head.script in nuxt.config.

Vue: one component in App.vue: Render it once, anywhere. It adds the script itself and renders as an empty comment node.
Nuxt: inside <ClientOnly>: Belt and braces — the work already happens in onMounted, which Nuxt only runs in the browser.
Script tag: still the no-dependency route: index.html before the closing body tag, or app.head.script in nuxt.config. Same widget, no package.
No SSR hazard: The widget is fetched at run time, not imported, so nothing of it ever runs during server render.

It renders nothing — an empty comment node — and does all of its work in onMounted, so it is safe to import on the server. On Nuxt, wrap it in <ClientOnly> and it stays out of the server render entirely. Rendering it twice is safe: the script is added once.

Documentation without duplication

The crawler reads your published documentation wherever it is deployed. Nothing has to be imported into the app, kept in sync, or maintained twice.

What the crawler sees: Vue SPA vs Nuxt

Our crawler fetches HTML and does not execute JavaScript. A Vite-built Vue SPA therefore reads as an empty shell — while a Nuxt site, server-rendered or statically generated, serves complete HTML and crawls like any other site.

Almost nothing in the dependency tree

The package is a thin wrapper with no dependencies of its own. It pins our loader rather than a widget build, so widget fixes reach you without a version bump, and nothing arrives in your lockfile because of a support widget. Skip it and paste the script tag, and there is no package at all.

Checking it actually worked

Four things, in order. The third is the one people skip, and it is the one that tells you whether the answers are grounded.

1Hard refresh the page — the launcher appears bottom-right.
2Ask it something your site answers, and check the reply cites a page.
3Ask it something your site does not cover, and check it declines.
4Open Conversations in the dashboard; both should be there.

On a different stack?

The snippet is the same everywhere. Only the place you paste it changes.

What developers ask

Short answers. If yours is not here, the assistant on this page will try it — and tell you honestly if it cannot.

Can you crawl a client-rendered Vue SPA?

No crawler that skips JavaScript can — ours reads the served HTML, which in a Vite SPA is a mount point and a script tag. Nuxt SSR or SSG serves real HTML and crawls normally; for a plain SPA, crawl your docs site or upload files.

How do I add it to Nuxt?

Render <MatterChat> inside <ClientOnly> in app.vue, or add the script through app.head.script in nuxt.config if you would rather not add a package. Both handle the server-rendered first load and later client navigation without per-page work.

Will it cause hydration errors?

No. The component renders nothing and does its work in onMounted, which never runs on the server, so it does not participate in hydration. The script tag route does not participate in rendering at all.

Does it work with Vue 2?

The package needs Vue 3. On Vue 2, paste the script tag into index.html — it goes in the HTML rather than the framework, so the Vue version is irrelevant.