Vue Live Chat Integration

Add MyLiveChat to your Vue app

A Vue app mounts into one HTML file, so that file is where the chat code belongs. With Vite the file is index.html in the project root; with Vue CLI it is public/index.html. The launcher then sits outside the Vue app entirely and is untouched by re-renders and router navigation.

Use this guide to add MyLiveChat to Vue. The free plan includes one agent, unlimited chats, and unlimited websites — no credit card required.

If you do not have a MyLiveChat account yet, create a free MyLiveChat account.

Start free

Sign in to the MyLiveChat web console and click Deployment menu on the left. Choose Embedded Chat tab and copy the MyLiveChat code.

1. Open index.html in the project root (Vite) or public/index.html (Vue CLI).
2. Paste the MyLiveChat code from Step 1 just before the closing </body> tag, after the <div id="app"></div> element.
3. Save and restart the dev server so the HTML entry point is re-read.
4. Build for production and deploy.

If you would rather load it from code, use onMounted in App.vue: create a script element, set its src, and append it to document.body. Do this in the root component, not a routed view, so it is not torn down on navigation.

Do not assume the install worked because you saw no error. Open your site in a private browsing window and walk through this once:

1. Look for the chat launcher on the page. If it is missing, view the page source and search for mylivechat to confirm the code is really being served.
2. Start a chat as a visitor and send a test message.
3. Sign in to the web console and confirm the message arrives and that you can reply.
4. Close the chat and check the transcript is saved, so you know follow-up will work.

Test the built site. Vite serves index.html differently in development than the static build does, so confirm the launcher on the production output.

• The snippet was placed in a component template. Vue does not execute <script> tags inside a template — the compiler treats them as markup. Use the HTML entry file or an onMounted hook.
• It was added to a routed view. A view unmounts when the user navigates. Put it in App.vue or the HTML shell so it persists.
• Only the dev server was tested. Run npm run build and serve the output before deciding the install worked.
• A v-if hid the container. If you wrapped the code in conditional markup it will never mount on the paths where the condition is false.

After setup, sign in to the web console to answer visitors from your browser. You can also use the desktop app from the download page if your team prefers it.

Want the AI to answer first? Point the AI assistant at your site content and it handles routine questions 24/7, then hands off to a human with the full transcript when one is needed.

Vue is common in dashboards, storefronts and internal tools — interfaces where a confused user has no obvious next step. A chat launcher gives them one without you having to build a support UI.

Because the widget lives outside the Vue tree, it does not participate in reactivity, does not re-render, and costs you nothing in component complexity.

Where do I put the code in a Vue project?

In index.html at the project root for Vite, or public/index.html for Vue CLI, just before the closing body tag.

Why does a script tag in my template do nothing?

The Vue template compiler treats script tags as markup and does not execute them. Use the HTML entry file or append the script from onMounted.

Does it survive Vue Router navigation?

Yes. The widget is attached to the document, not to a component, so route changes do not reload or remove it.

Does it work with Nuxt?

The same principle applies, but Nuxt has its own app configuration for third-party scripts. Add it there rather than editing the generated HTML.

Is it really free?

Yes. One agent, unlimited chats, and unlimited websites are free forever, with no credit card required.

Colours, position, language, the pre-chat form and your offline message are all set in your MyLiveChat dashboard rather than in your Vue code, so you can change them without editing your project again. See customization options for what can be changed, and visitor monitoring if you want to see which page a visitor is on before you reply.

New to live chat? Start with how to add live chat to your website and the live chat launch checklist, then live chat best practices once you are answering real conversations. Also useful: Live chat on a single-page app and Chat widget placement and design. If you are worried about page speed, see does live chat slow down your website.

If anything is unclear, contact our support team from the chat button on this page or visit the Support page. We can help you choose the right setup path.