💚Vue / Nuxt Integration Guide

Add an AI chatbot to your Vue 3 or Nuxt 3 application with index.html or nuxt.config.ts.

1Vue 3 (Vite): Add to index.html

Open index.html in your project root and paste the embed script before the closing </body> tag. This is the simplest approach for Vue 3 apps created with Vite.

2Nuxt 3: Configure in nuxt.config.ts

Open nuxt.config.ts and add the script to the app.head.script array. Set body: true to load the script at the end of the body. Nuxt handles injection automatically.

3Replace YOUR_BOT_ID

Replace the placeholder YOUR_BOT_ID with your actual bot ID from the BotEmbed.ai dashboard.

4Run your dev server to verify

Start your development server (npm run dev) and confirm the chat widget appears on the page.

Code Examples

index.html (Vue 3 / Vite)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>

  <!-- BotEmbed.ai Chat Widget -->
  <script
  src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
  data-theme="light"
  data-position="bottom-right"
></script>
</body>
</html>

nuxt.config.ts (Nuxt 3)

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID',
          'data-theme': 'light',
          'data-position': 'bottom-right',
          body: true,
        },
      ],
    },
  },
});

Tips

For Vue 3 with Vite, the index.html approach is the simplest and requires no Vue-specific code.

In Nuxt 3, setting body: true in the script config ensures the script loads at the end of the <body> for better performance.

If you need to conditionally load the widget, use the onMounted lifecycle hook in a Vue component to dynamically create the script element.

The widget works with Vue Router — it persists across route changes without reloading.

Previous▲ Next.js Next🅰️ Angular