Nuxt Live Chat Integration

Add MyLiveChat to your Nuxt app

Nuxt has no index.html for you to edit. It generates the HTML on every build, which is why the usual advice for a Vue app does not transfer: any tag you add to the generated output in .output or dist is thrown away the next time you build. The durable place for a third-party script is nuxt.config.ts, under app.head.script.

Use this guide to add MyLiveChat to Nuxt. 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 nuxt.config.ts in your project root.
2. Inside defineNuxtConfig, add an app.head.script array entry whose src is the MyLiveChat URL from Step 1, with async: true.
3. Do not edit the generated HTML in .output/public or dist — the next build overwrites it.
4. Restart the dev server, then run nuxt build and nuxt preview (or nuxt generate) before deploying.

You can also call useHead() in app.vue for the same site-wide effect. Calling it inside a single page component scopes the tag to that route only, which is a common reason the widget shows on one page and nowhere else. Do not put the snippet in a component <template>: the Vue compiler does not render script tags from templates, so it disappears without an error.

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.

Check a real build, not just the dev server. A development server and a production build load third-party scripts differently, and a widget that appears while you are developing can still be absent from the deployed site.

• The generated HTML was edited. Anything added to .output/public or dist is regenerated on the next build. Nuxt has no checked-in index.html.
• A script tag was written in a component template. The Vue compiler does not render script tags from templates. Nothing is added and nothing is logged.
• useHead() was called in one page. That scopes the tag to that route. Use app.head in nuxt.config.ts, or call it in app.vue.
• The snippet touched window during server rendering. On the server there is no window or document, so code that reaches for them in setup breaks the render. A head script entry runs only in the browser.

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.

Nuxt is chosen when a Vue app also has to rank, so a large share of traffic is strangers landing from search on a deep route. Chat gives them a way to ask before they leave.

Declaring the script in nuxt.config.ts means it is part of your build rather than a manual step. It survives rebuilds, redeploys and new routes without anyone remembering it.

Where do I put the code in a Nuxt app?

In nuxt.config.ts, as an app.head.script entry. Nuxt generates its HTML, so there is no index.html to edit.

I added the tag to the built HTML and it disappeared. Why?

Nuxt regenerates the files in .output/public and dist on every build. Declare the script in nuxt.config.ts instead.

Why does the widget only appear on one page?

useHead() called inside a page component applies to that route only. Use app.head in nuxt.config.ts, or call useHead in app.vue.

Does server-side rendering cause a problem?

No. A head script entry is emitted as markup and runs in the browser, so it never touches window or document during server rendering.

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 Nuxt 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: Loading your live chat script without slowing your page and Live chat on a single-page app. 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.