Vue.js Integration

Add Ask0 to your Vue.js app with simple script integration or Vue component wrapper. Seamless setup for Vue 2 and Vue 3.

Integrate Ask0 into your Vue.js application for instant user support.

Vue 3 Composition API

App.vue

<script setup>
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://assets.ask0.ai/scripts/ask.js';
  script.async = true;
  script.dataset.projectId = import.meta.env.VITE_ASK0_PROJECT_ID;

  document.body.appendChild(script);
});

onUnmounted(() => {
  // Cleanup
  if (window.ask0) {
    window.ask0.destroy?.();
  }
});
</script>

<template>
  <div id="app">
    <!-- Your app content -->
  </div>
</template>

Vue 3 Options API

<script>
export default {
  name: 'App',
  mounted() {
    this.loadAsk0();
  },
  methods: {
    loadAsk0() {
      const script = document.createElement('script');
      script.src = 'https://assets.ask0.ai/scripts/ask.js';
      script.async = true;
      script.dataset.projectId = process.env.VUE_APP_ASK0_PROJECT_ID;
      document.body.appendChild(script);
    },
    openSupport() {
      window.ask0?.open();
    }
  }
}
</script>

Nuxt 3

app.vue

<script setup>
useHead({
  script: [
    {
      src: 'https://assets.ask0.ai/scripts/ask.js',
      'data-project-id': useRuntimeConfig().public.ask0ProjectId,
      async: true
    }
  ]
})
</script>

Nuxt Config

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      ask0ProjectId: process.env.NUXT_PUBLIC_ASK0_PROJECT_ID
    }
  }
})

Plugin

plugins/ask0.client.ts

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();

  if (process.client) {
    const script = document.createElement('script');
    script.src = 'https://assets.ask0.ai/scripts/ask.js';
    script.dataset.projectId = config.public.ask0ProjectId;
    document.body.appendChild(script);
  }
});

Composable

composables/useAsk0.ts

export const useAsk0 = () => {
  const open = () => window.ask0?.open();
  const close = () => window.ask0?.close();
  const toggle = () => window.ask0?.toggle();

  return { open, close, toggle };
};

// Usage in component
const { open } = useAsk0();

Environment Variables

.env

VITE_ASK0_PROJECT_ID=your_project_id

NUXT_PUBLIC_ASK0_PROJECT_ID=your_project_id

Vue.js Tips:

Use lifecycle hooks for script loading
Create composables for reusable logic
Use environment variables for configuration
Handle cleanup in unmount hooks