Vue.js / Nuxt.js Installation

Install the nuhello chatbot on your Vue.js or Nuxt.js application.

Nuxt.js 3

For Nuxt 3 applications:

Method 1: Using nuxt.config.ts

Add the script to your nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          innerHTML: `
            window.nuhelloSettings = {
              key: "YOUR_PIXEL_KEY",
              botId: "YOUR_BOT_ID"
            };
            (function() {
              var s = document.createElement('script');
              s.src = 'https://cdn.nuhello.com/widget.js';
              s.async = true;
              document.head.appendChild(s);
            })();
          `,
          type: 'text/javascript'
        }
      ]
    }
  }
});

Method 2: Using a Plugin

Create a plugin plugins/nuhello.client.ts:

export default defineNuxtPlugin(() => {
  if (process.client) {
    (window as any).nuhelloSettings = {
      key: "YOUR_PIXEL_KEY",
      botId: "YOUR_BOT_ID"
    };
 
    const script = document.createElement('script');
    script.src = 'https://cdn.nuhello.com/widget.js';
    script.async = true;
    document.head.appendChild(script);
  }
});

The .client.ts suffix ensures it only runs on the client side.

Nuxt.js 2

For Nuxt 2 applications:

Edit nuxt.config.js

export default {
  head: {
    script: [
      {
        innerHTML: `
          window.nuhelloSettings = {
            key: "YOUR_PIXEL_KEY",
            botId: "YOUR_BOT_ID"
          };
          (function() {
            var s = document.createElement('script');
            s.src = 'https://cdn.nuhello.com/widget.js';
            s.async = true;
            document.head.appendChild(s);
          })();
        `,
        type: 'text/javascript'
      }
    ],
    __dangerouslyDisableSanitizers: ['script']
  }
}

Vue.js 3 (Vite)

For Vue 3 with Vite:

Method 1: Edit index.html

Add the script to index.html:

<!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>
 
    <script>
      window.nuhelloSettings = {
        key: "YOUR_PIXEL_KEY",
        botId: "YOUR_BOT_ID"
      };
      (function() {
        var s = document.createElement('script');
        s.src = 'https://cdn.nuhello.com/widget.js';
        s.async = true;
        document.head.appendChild(s);
      })();
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Method 2: Using a Composable

Create a composable composables/useNuhello.ts:

import { onMounted, onUnmounted } from 'vue';
 
export function useNuhello() {
  let script: HTMLScriptElement | null = null;
 
  onMounted(() => {
    (window as any).nuhelloSettings = {
      key: "YOUR_PIXEL_KEY",
      botId: "YOUR_BOT_ID"
    };
 
    script = document.createElement('script');
    script.src = 'https://cdn.nuhello.com/widget.js';
    script.async = true;
    document.head.appendChild(script);
  });
 
  onUnmounted(() => {
    if (script) {
      script.remove();
    }
  });
 
  const openWidget = () => {
    if ((window as any).openNuhelloWidget) {
      (window as any).openNuhelloWidget();
    }
  };
 
  return { openWidget };
}

Use it in your App.vue:

<script setup lang="ts">
import { useNuhello } from '@/composables/useNuhello';
 
useNuhello();
</script>
 
<template>
  <router-view />
</template>

Vue.js 2

For Vue 2 applications:

Edit main.js

import Vue from 'vue';
import App from './App.vue';
 
Vue.config.productionTip = false;
 
// Load nuhello
window.nuhelloSettings = {
  key: "YOUR_PIXEL_KEY",
  botId: "YOUR_BOT_ID"
};
 
const script = document.createElement('script');
script.src = 'https://cdn.nuhello.com/widget.js';
script.async = true;
document.head.appendChild(script);
 
new Vue({
  render: h => h(App),
}).$mount('#app');

Passing User Data

To identify logged-in users with Pinia (Vue 3):

// plugins/nuhello.client.ts
import { useUserStore } from '@/stores/user';
 
export default defineNuxtPlugin(() => {
  if (process.client) {
    const userStore = useUserStore();
 
    (window as any).nuhelloSettings = {
      key: "YOUR_PIXEL_KEY",
      botId: "YOUR_BOT_ID",
      ...(userStore.user && {
        userId: userStore.user.id,
        name: userStore.user.name,
        email: userStore.user.email
      })
    };
 
    const script = document.createElement('script');
    script.src = 'https://cdn.nuhello.com/widget.js';
    script.async = true;
    document.head.appendChild(script);
  }
});

Opening the Widget

Create a component to open the chat:

<script setup lang="ts">
const openChat = () => {
  if (typeof window !== 'undefined' && (window as any).openNuhelloWidget) {
    (window as any).openNuhelloWidget();
  }
};
</script>
 
<template>
  <button @click="openChat">
    Chat with us
  </button>
</template>

Troubleshooting

Widget not appearing?

Ensure the script runs only on the client side
Check browser console for errors
Verify the pixel key and bot ID

SSR Issues?

Use .client.ts suffix for plugins in Nuxt 3
Use process.client or typeof window !== 'undefined' checks

React / Next.js Angular