Intégration Vue.js
Intégrez le widget AskIA dans votre application Vue.js.
Intégration de Base
Ajoutez le widget AskIA à votre application Vue.js en utilisant le cycle de vie du composant :
Options API
App.vue
<template>
<div id="app">
<!-- Your app content -->
</div>
</template>
<script>
export default {
name: 'App',
mounted() {
// Check if widget already loaded
if (window.AskIAWidget) {
return
}
const script = document.createElement('script')
script.src = 'askiabot.com/api/widget/embed.js?botId=YOUR_BOT_ID'
script.async = true
document.body.appendChild(script)
},
beforeUnmount() {
// Cleanup on component destroy
const widget = document.querySelector('askia-widget')
if (widget) {
widget.remove()
}
if (window.cleanupAskIAWidget) {
window.cleanupAskIAWidget()
}
}
}
</script>Composition API
App.vue
<template>
<div id="app">
<!-- Your app content -->
</div>
</template>
<script setup>
import { onMounted, onUnmounted } from 'vue'
const botId = 'YOUR_BOT_ID'
onMounted(() => {
if (window.AskIAWidget) {
return
}
const script = document.createElement('script')
script.src = `askiabot.com/api/widget/embed.js?botId=${botId}`
script.async = true
document.body.appendChild(script)
})
onUnmounted(() => {
const widget = document.querySelector('askia-widget')
if (widget) {
widget.remove()
}
if (window.cleanupAskIAWidget) {
window.cleanupAskIAWidget()
}
})
</script>Composant Réutilisable
Créez un composant Vue réutilisable :
components/AskIAWidget.vue
<template>
<!-- Component renders nothing, just loads the script -->
</template>
<script setup>
import { onMounted, onUnmounted, watch } from 'vue'
const props = defineProps({
botId: {
type: String,
required: true
}
})
let script = null
const loadWidget = () => {
if (window.AskIAWidget) {
return
}
script = document.createElement('script')
script.src = `askiabot.com/api/widget/embed.js?botId=${props.botId}`
script.async = true
document.body.appendChild(script)
}
const cleanup = () => {
const widget = document.querySelector('askia-widget')
if (widget) {
widget.remove()
}
if (script && script.parentNode) {
script.parentNode.removeChild(script)
}
if (window.cleanupAskIAWidget) {
window.cleanupAskIAWidget()
}
window.AskIAWidget = false
}
onMounted(() => {
loadWidget()
})
onUnmounted(() => {
cleanup()
})
// Reload if botId changes
watch(() => props.botId, () => {
cleanup()
loadWidget()
})
</script>Utiliser le Composant
App.vue
<template>
<div id="app">
<h1>My Vue App</h1>
<!-- Your app content -->
<AskIAWidget :bot-id="botId" />
</div>
</template>
<script setup>
import AskIAWidget from '@/components/AskIAWidget.vue'
const botId = 'YOUR_BOT_ID'
</script>Intégration Nuxt.js
Pour les applications Nuxt.js, utilisez un plugin :
Plugin
plugins/askia.client.js
// plugins/askia.client.js
export default defineNuxtPlugin(() => {
if (process.client) {
const botId = useRuntimeConfig().public.askiaBotId
if (!window.AskIAWidget) {
const script = document.createElement('script')
script.src = `https://askiabot.com/api/widget/embed.js?botId=${botId}`
script.async = true
document.body.appendChild(script)
}
}
})Configuration Nuxt
nuxt.config.ts
// nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
public: {
askiaBotId: process.env.ASKIA_BOT_ID || 'YOUR_BOT_ID'
}
}
})Composable (Composition API)
Créez un composable pour une meilleure réutilisabilité :
composables/useAskIA.ts
// composables/useAskIA.ts
import { onMounted, onUnmounted } from 'vue'
export function useAskIA(botId: string) {
let script: HTMLScriptElement | null = null
const load = () => {
if (window.AskIAWidget) {
return
}
script = document.createElement('script')
script.src = `askiabot.com/api/widget/embed.js?botId=${botId}`
script.async = true
document.body.appendChild(script)
}
const unload = () => {
const widget = document.querySelector('askia-widget')
if (widget) {
widget.remove()
}
if (script && script.parentNode) {
script.parentNode.removeChild(script)
}
if (window.cleanupAskIAWidget) {
window.cleanupAskIAWidget()
}
window.AskIAWidget = false
script = null
}
onMounted(() => {
load()
})
onUnmounted(() => {
unload()
})
return {
load,
unload
}
}Utiliser le Composable
App.vue
<template>
<div>
<h1>My Vue App</h1>
</div>
</template>
<script setup>
import { useAskIA } from '@/composables/useAskIA'
useAskIA('YOUR_BOT_ID')
</script>Bonnes Pratiques
- Côté Client Uniquement : Vérifiez toujours
process.clientdans Nuxt - Nettoyage : Retirez le widget au démontage du composant
- Props : Utilisez des props pour l'ID du bot afin de rendre les composants réutilisables
- Variables d'Environnement : Stockez la configuration dans des variables d'environnement