Matter Chat
Start free
Vue

Add an AI support assistant to a Vue or Nuxt app

One snippet in index.html for Vue, or a few lines of app config for Nuxt. Nothing enters your dependency tree.

  • Two lines
  • About two minutes
  • One file
Get your keyFull install docs
index.htmlfile
<!-- Matter Chat — paste right before </body> --><script>  window.MatterChat = window.MatterChat || { q: [] };  window.MatterChat.q.push(["init", { id: "bot_your_key" }]);</script><script async src="https://app.matterchat.co/widget.js"></script>
</body>

html · paste above the dimmed line

Where the snippet goes

For a plain Vue app built with Vite, paste the two lines into index.html before the closing body tag. For Nuxt, add the script through app.head.script in nuxt.config, which places it correctly for both server-rendered and client-navigated pages.

Vue: index.html
Before the closing body tag, outside the app mount point.
Nuxt: app.head.script
Configured once in nuxt.config and applied across every route.
No SSR hazard
It is an external script rather than an imported module, so it never runs during server render.
!

On Nuxt, add it through app.head.script in nuxt.config instead, so it lands correctly on server-rendered routes as well as client-navigated ones.

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.

Nothing in the dependency tree

No package means no version to track, no peer-dependency conflict, and no transitive dependencies arriving in your lockfile because of a support widget.

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.

  1. 1Hard refresh the page — the launcher appears bottom-right.
  2. 2Ask it something your site answers, and check the reply cites a page.
  3. 3Ask it something your site does not cover, and check it declines.
  4. 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?

Through app.head.script in nuxt.config, which handles both the server-rendered first load and subsequent client navigation without any per-page work.

Will it cause hydration errors?

No. It is an external script rather than a component in your tree, so it does not participate in rendering or hydration at all.

Does it work with Vue 2?

Yes — the snippet goes in the HTML rather than the framework, so the Vue version is irrelevant.

From the blog

All posts

Answer honestly. Capture the rest.

Point Matter Chat at your site and see what it can — and can't — answer. It's honest about both.

Start free — chat in your site

No credit card. 2 minute setup.

Every answer cites the source it came from. When there isn't one, it says so — and hands the visitor to you.

Installs on the tools you already run.