Vue.js Integration

Integrate AskIA widget into your Vue.js application.

Basic Integration

Add the AskIA widget to your Vue.js app using the component lifecycle:

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>

Reusable Component

Create a reusable Vue component:

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>

Using the Component

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>

Nuxt.js Integration

For Nuxt.js applications, use a 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)
    }
  }
})

Nuxt Config

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      askiaBotId: process.env.ASKIA_BOT_ID || 'YOUR_BOT_ID'
    }
  }
})

Composable (Composition API)

Create a composable for better reusability:

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
  }
}

Using the Composable

App.vue

<template>
  <div>
    <h1>My Vue App</h1>
  </div>
</template>

<script setup>
import { useAskIA } from '@/composables/useAskIA'

useAskIA('YOUR_BOT_ID')
</script>

Best Practices

Client-Side Only: Always check process.client in Nuxt
Cleanup: Remove widget on component unmount
Props: Use props for bot ID to make components reusable
Environment Variables: Store configuration in environment variables

Next Steps

WordPress Example

See how to integrate with WordPress

React Example

See React integration examples