How to Add an AI Chatbot to Vue
Vue.js is known for its simplicity and developer experience. Adding a Tuqlas AI chatbot to Vue is just as simple — use the onMounted hook to inject the embed script.
01
Create a chatbot on Tuqlas
Sign up at tuqlas.com, create a chatbot, and copy your embed key.
02
Inject the script in onMounted
In your root component (App.vue), use the Composition API to create and append the script element when the component mounts.
03
Done
The chat widget loads automatically. It works with Vue 3, Nuxt 3, and any Vue-based setup.
App.vue
<script setup>
import { onMounted, onUnmounted } from "vue"
let script
onMounted(() => {
script = document.createElement("script")
script.src = "https://tuqlas.com/chatbot.js"
script.setAttribute("data-key", "tq_live_xxxxxxxxxxxx")
script.defer = true
document.body.appendChild(script)
})
onUnmounted(() => script?.remove())
</script>💡 Tip
For Nuxt 3, you can also use the useHead composable or place the script in your app.vue file.
Ready to add a chatbot to Vue?
Create your chatbot and get your embed key in under a minute.