Do I need a Vue plugin or a component for the chat?
No. The script tag goes in index.html, outside your Vue app, and the chat runs in its own iframe. There is nothing to register in main.ts.
Install guide
Live chat for Vue
One script tag in index.html is the whole install, no package to add to your Vue project. On Nuxt the same tag goes in nuxt.config.
No credit card needed · Free for 21 days
index.html
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script
src="https://app.mewdesk.com/widget.js"
data-site-id="YOUR_SITE_ID"
async>
</script>
</body>
</html>
Where it goes
Paste it once on Vue
The snippet is the same on every platform: one script tag just before the closing body tag. These steps show where that is on Vue.
- 1
Copy your snippet from the dashboard
Add your website under Websites, using the domain you are installing on, and copy the snippet from its Embed code page. It has your site ID filled in; the one shown here uses a placeholder.
- 2
Open your app's HTML file
With Vite (the create-vue default) it is index.html at the project root. With Vue CLI it is public/index.html.
- 3
Paste the snippet before </body>
Put it after the script that loads your app. The tag is async, so it never delays your bundle.
- 4
Nuxt: add it in nuxt.config instead
Add an entry to app.head.script with the same src and data-site-id, async set to true and tagPosition set to bodyClose, so Nuxt renders the tag before </body> on every page.
Good to know
- Open the chat from your own button with the data-mewdesk-open attribute (no code needed), or call window.Mewdesk?.open() from a method.
- The chat stays on screen while Vue Router changes pages, because the app never leaves its HTML page.
What you get
The same Mewdesk, whatever your site runs on
The widget lives in its own iframe, so it looks and works the same on Vue as everywhere else.
One script tag
That is the whole install. No npm package, no build step, no plugin to keep updated.
Replies in seconds
Visitors see your answer the moment you send it, without refreshing. Your team replies from one inbox.
Offline form
When nobody is online, visitors leave their email and a message, and the chat picks up where it left off.
No tracking cookies
No IP addresses, no fingerprinting, no third-party scripts. A name, an optional email and the conversation.
FAQ
Mewdesk on Vue
Questions people ask before adding live chat to a Vue site. For everything else, the general FAQ has the rest.
How do I add it to a Nuxt app?
In nuxt.config, add a script entry under app.head.script with the src and data-site-id from your snippet, async set to true and tagPosition set to bodyClose. Nuxt then renders the tag before </body> on every page.
Can I open the chat from a Vue button?
Yes. Add data-mewdesk-open to the button, which needs no code, or call window.Mewdesk?.open() in a method bound to its click event.
Also installing on
Add live chat to your Vue site today
Paste the snippet, answer your first visitor. The first 21 days are on us, with no card needed.