Add live chat to Vue. DeskCrew support widget
DeskCrew adds AI live chat, an AI support chatbot and ticketing to a Vue app through the official @deskcrew/vue package: a plugin or a DeskCrewWidget component, Vue 3 and Nuxt, persists across Vue Router navigation. A single script tag in index.html works too.
An official npm package
Install @deskcrew/vue and register the plugin in main.js, or drop in the component. Vue 3 and Nuxt, mounted once, kept across router navigation.
AI drafts, humans approve
The AI drafts replies grounded in the knowledge base you publish, and every draft waits in an approval queue until a human sends it.
Every conversation is a ticket
Widget chats, emails, and board posts land in one dashboard with full history; visitors who leave get their answer by email.
Free plan, no card
The free plan includes the chat widget, a public knowledge base, and ticketing. Start free and upgrade only when you outgrow it.
How to install DeskCrew on Vue
Install the official package: npm install @deskcrew/vue.
Register it in main.js: import { deskcrew } from "@deskcrew/vue", then app.use(deskcrew, { widgetKey: "pub_YOUR_KEY", board: "your-board" }). Prefer a component? Render <DeskCrewWidget widget-key="pub_YOUR_KEY" /> in App.vue instead.
Build and deploy. The widget mounts once and persists across Vue Router navigation, so an open conversation is not reset when the route changes. Your key and board slug are on the dashboard’s Install page.
<script src="https://deskcrew.io/desk.js" data-key="pub_YOUR_KEY" data-board="your-board" defer></script>
pub_YOUR_KEY and your-board are placeholders. Your real widget key and board slug are in your DeskCrew dashboard under Install (free signup, no card).
Note: Prefer no dependency? Paste the tag below into index.html, the shell Vite mounts your app into, before </body>.
DeskCrew vs the usual suspects
| DeskCrew | Tidio | Crisp | Zendesk | |
|---|---|---|---|---|
| Free tier | Yes. Free plan, no card | Yes (limited) | Yes (basic) | Free trial only |
| AI included | Yes. AI drafts on every plan, human-approved | Paid add-on | Higher plans | Paid add-on |
| Setup | About 2 minutes. One script tag or plugin | Minutes. Script tag | Minutes. Script tag | Longer. Full workspace setup |
| Price floor | $0 free plan · paid from $29/mo | Free plan; paid tiers above | Free plan; paid tiers above | Per-agent pricing, no free plan |
Competitor cells generalize their public pricing pages. Always check current plans.
DeskCrew has a free plan with no card. Chat widget, public knowledge base, and ticketing included. Every new workspace starts with full Team features free for 14 days, and paid plans start at $29/mo. Full details on the pricing page.
FAQ. add live chat to Vue
Last updated: September 2026
How do I add live chat to a Vue app?
Paste the widget script into index.html at the project root, just before the closing body tag. That file is the shell your app mounts into, so the widget loads once and persists across every route.
Should I add it to a component instead?
Only if you want the widget on some routes and not others. Adding it in a component means it mounts and unmounts with that component, which can reset an open conversation. index.html avoids that entirely.
Using Nuxt rather than plain Vue?
Use the Nuxt module instead. It handles the head entry for you and is documented on the Nuxt integration page.
Will it interfere with Vue Router?
No. The widget lives outside the app’s mount point and never re-renders on navigation, so client-side routing does not affect it.
Is there a free live chat widget for Vue?
Yes. The DeskCrew free plan includes the chat widget, ticketing, a public help center, and a monthly AI answer allowance, with no credit card.