Vue Integration

Learn how to integrate EasyFindAi into your Vue application

1

Get Your API Key

Select a chatbot in the dashboard to view its API key

2

Create a Vue Component

Create a new Vue component to load the EasyFindAi chatbot script.

<!-- EasyFindAiChatbot.vue -->
<template>
  <!-- This component doesn't render anything visible -->
</template>


<script>
export default {
  name: 'EasyFindAiChatbot',
  props: {
    apiKey: {
      type: String,
      required: true,
      default: 'YOUR_API_KEY'
    }
  },
  mounted() {
    // Create script element
    const script = document.createElement('script');
    script.src = 'https://easyfindai.com/api/chatbot-embed?apiKey=YOUR_API_KEY';
    
    // Append to document
    document.body.appendChild(script);
    
    // Store reference for cleanup
    this.scriptElement = script;
  },
  beforeUnmount() {
    // Clean up when component is destroyed
    if (this.scriptElement && document.body.contains(this.scriptElement)) {
      document.body.removeChild(this.scriptElement);
    }
  }
}
</script>
3

Vue 3 Composition API Version

If you're using Vue 3 with the Composition API, here's an alternative implementation:

<!-- EasyFindAiChatbot.vue (Composition API) -->
<template>
  <!-- This component doesn't render anything visible -->
</template>


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


const props = defineProps({
  apiKey: {
    type: String,
    required: true,
    default: 'YOUR_API_KEY'
  }
});


const scriptElement = ref(null);


onMounted(() => {
  // Create script element
  const script = document.createElement('script');
  script.src = 'https://easyfindai.com/api/chatbot-embed?apiKey=YOUR_API_KEY';
  
  // Append to document
  document.body.appendChild(script);
  
  // Store reference for cleanup
  scriptElement.value = script;
});


onBeforeUnmount(() => {
  // Clean up when component is destroyed
  if (scriptElement.value && document.body.contains(scriptElement.value)) {
    document.body.removeChild(scriptElement.value);
  }
});
</script>
4

Add to Your App

Import and use the component in your main App component so it's available throughout your site.

<!-- App.vue -->
<template>
  <div id="app">
    <!-- Your app content -->
    <router-view />
    
    <!-- Add the chatbot component -->
    <EasyFindAiChatbot :api-key="'YOUR_API_KEY'" />
  </div>
</template>


<script>
import EasyFindAiChatbot from './components/EasyFindAiChatbot.vue';


export default {
  name: 'App',
  components: {
    EasyFindAiChatbot
  }
}
</script>

Or with Vue 3 Composition API:

<!-- App.vue (Composition API) -->
<template>
  <div id="app">
    <!-- Your app content -->
    <router-view />
    
    <!-- Add the chatbot component -->
    <EasyFindAiChatbot :api-key="'YOUR_API_KEY'" />
  </div>
</template>


<script setup>
import EasyFindAiChatbot from './components/EasyFindAiChatbot.vue';
</script>
5

Nuxt.js Considerations

If you're using Nuxt.js, you'll need to ensure the script only loads on the client side:

<!-- plugins/easyfindai-chatbot.client.js -->
export default defineNuxtPlugin(() => {
  // Create script element
  const script = document.createElement('script');
  script.src = 'https://easyfindai.com/api/chatbot-embed?apiKey=YOUR_API_KEY';
  
  // Append to document
  document.body.appendChild(script);
});

The .client suffix in the filename ensures this plugin only runs in the browser, not during server-side rendering.

Note: For Nuxt 3, make sure to place this file in the plugins directory. For Nuxt 2, you'll need to register it in your nuxt.config.js file.

That's it!

The chatbot will now be available on all pages of your Vue application. No additional configuration is needed!