Vue AI Chat Widget
A Vue single-page app wants a chat widget that starts once and stays with the user as the router swaps views underneath it. EasyChatWidget does that from your root component: an onMounted hook injects the script and onUnmounted tidies it away, with no plugin or wrapper package involved.
It runs beside your Vue instance rather than inside it, so there is no reactive state to manage and no hit to render performance. Train it on your content and it fields user questions continuously, in any language, and calls in a human whenever one is needed.
Why add EasyChatWidget to Vue
- Starts once from your root component and stays put across every route
- Runs outside the Vue instance - no reactivity to wire, no render cost
- Set up from App.vue or a plain tag in index.html
- Answers continuously with instant human handoff when required
Best for: Vue use cases
Vue SaaS apps
Answer product and account questions inside the app experience.
Admin panels & portals
Give operators contextual guidance without leaving the tool.
Nuxt marketing sites
Convert visitors with instant answers on your public pages.
Interactive web apps
Support users through complex flows as they navigate.
How to install the chat widget on Vue
- 1Add to your root setupIn App.vue’s <script setup>, inject the script on mount as shown below.
- 2Or use index.htmlAlternatively, paste the plain script tag into index.html before </body>.
Your embed snippet
Copy this and follow the steps above.
import { onMounted, onUnmounted } from 'vue'
let s
onMounted(() => {
s = document.createElement('script')
s.src = 'https://easychatwidget.com/widget.js'
s.dataset.widgetId = 'YOUR_WIDGET_ID'
s.async = true
document.body.appendChild(s)
})
onUnmounted(() => s?.remove())YOUR_WIDGET_ID with the ID from your dashboard. Don’t have one yet? Create a free account to get it.See the Vue chat widget in action
EasyChatWidget vs. building chat yourself
How the EasyChatWidget AI chat widget compares with building chat yourself on Vue.
