Add a Voice AI Agent to a Vue 3 App (2026 Guide)

How to add AnveVoice to a Vue app

In a Vue 3 project created with create-vue, paste the AnveVoice script tag into index.html at the project root, next to package.json. Vite copies absolute URLs through untouched. If you use Nuxt instead of plain Vue, follow the Nuxt guide. Steps checked against the official documentation on 2026-10-14.

At a glance

• Where the code goes: index.html in the project root (not src/ and not public/)
• Coding needed: None for the static tag; about ten lines of script for the optional onMounted loader
• Plan limits: None from Vue or Vite. Free AnveVoice plan is enough
• Time: About 2 minutes plus a rebuild

What this covers

Vue's quick-start guide scaffolds new projects with create-vue (npm create vue@latest), a tool that sets up a Vite-based single-page app with single-file components. This page is for that setup. Server-rendered Vue through Nuxt keeps its page shell elsewhere and has its own guide, while a Vue app dropped into an existing server-rendered site is covered by the plain HTML guide. Get your embed ID first: sign in at app.anvevoice.app, create a website bot on the Free plan, and copy the ID shown in the dashboard.

• 1. Copy the install tag — Replace YOUR_EMBED_ID with your own. Optional URL parameters: &position=bottom-left and &theme=dark. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Method 1: put the tag in index.html (recommended)

Vite's guide states that index.html is the front-and-central entry point of a project and sits at the project root rather than inside public. Vue's scaffold inherits that layout. The file contains a div with id app and a module script pointing at /src/main.js or /src/main.ts.

• 1. Open index.html — It is in the same folder as package.json and vite.config. Do not look in src/ or public/.
• 2. Add the tag before the closing body tag — Put it after the existing type="module" script line. Because it has the async attribute, order does not matter for loading, but keeping app code first makes the file easier to read.
• 3. Restart or rebuild — npm run dev serves the page and reloads when index.html changes. npm run build writes the production site to ./dist, which Vue's guide names as the build output.

How Vite treats the tag

Vite processes index.html as source: module scripts become part of the build graph. A script without type="module" cannot be bundled, but an absolute https URL is recognised as external and passed through as written, with no warning. Vite's features guide also documents a vite-ignore attribute that opts an element out of HTML processing, which the guide suggests for external assets and CDN references. You should not need it, but it is the documented escape hatch if a plugin of yours rewrites script tags.

Method 2: load it from a component, in production only

Use this if you want the voice agent skipped during local development, or if the embed ID changes per environment. Vite exposes import.meta.env.PROD and any variable that starts with VITE_ to client code. The embed ID is public by design because it already appears in the script URL, so a VITE_ variable is appropriate; keep real secrets out of VITE_ variables, as Vite's guide warns.

• 1. Add the variable — Create .env.production in the project root. Vite reads env files at start, so restart the dev server after editing. Code: VITE_ANVEVOICE_EMBED_ID=YOUR_EMBED_ID
• 2. Load it in App.vue — This runs only in the browser, only in production builds, and only once. Code: <script setup> import { onMounted } from 'vue' onMounted(() => { const id = import.meta.env.VITE_ANVEVOICE_EMBED_ID if (!import.meta.env.PROD || !id) return const src = `https://anvevoice.app/embed.js?embedId=${id}` if (document.querySelector(`script[src="${src}"]`)) return const s = document.createElement('script') s.src = src s.async = true document.body.appendChild(s) }) </script>

Vue Router, KeepAlive and hot reload

• Vue Router changes the view without reloading the document, so a tag loaded once keeps working across routes. No router hook is needed.
• During npm run dev with Method 2 you will not see the button, because PROD is false. Remove that check or run npm run build followed by the preview command to test.
• If you have no build step at all and load Vue from a CDN, as Vue's guide describes, paste the tag into the same HTML file; nothing else changes.
• Pages served by a Vue app still need an HTTP server that falls back to index.html for deep links, or visitors who open a nested URL get a 404 and never load the script.

Check that it works

• 1. Open the built or running app — Use a private window. Microphone access needs HTTPS on a deployed site; localhost is allowed by browsers.
• 2. Click the microphone — A round button appears bottom-right. Grant microphone access and speak a question.
• 3. Inspect the output — Open dist/index.html after a build and search for anvevoice.app. You should find the tag exactly once.

Common problems

• Edited the wrong file: a tag in public/index.html or src/ does nothing, because Vite only builds from the root index.html.
• Button works in dev, missing in production: your env file is named .env.local, which production CI does not have. Use .env.production or set the variable in your host's build settings.
• Duplicate widget: both the HTML tag and the onMounted loader are present. Remove one.
• Blocked by CSP: allow https://anvevoice.app for scripts and connections.

Sources

• Vue docs: quick start (create-vue) (https://vuejs.org/guide/quick-start.html) — checked 2026-10-14
• Vite docs: getting started (index.html and project root) (https://vite.dev/guide/) — checked 2026-10-14
• Vite docs: features (HTML processing and vite-ignore) (https://vite.dev/guide/features.html) — checked 2026-10-14
• Vite docs: env variables and modes (https://vite.dev/guide/env-and-mode.html) — checked 2026-10-14

Related

• How to add AnveVoice to a React app
• How to add AnveVoice to an Angular application
• How to add AnveVoice to a plain HTML website

Try AnveVoice on your site

Free plan: $0, 50,000 tokens a month, no card. Get your embed ID in the dashboard, then paste one tag.