Heyo Nuxt

Heyo chat widget integration for Nuxt.

Website: heyo.so

• ✨  Release Notes

Features

• ✨  Easy integration
• 🚀  Fast and lightweight
• 🎨  Customizable widget

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @heyo.so/nuxt

That's it! You can now use Heyo Nuxt in your Nuxt app ✨ No need for any configuration, the module will automatically load the Heyo chat widget.

However, it won't work in localhost out of the box.

Configuration

You can configure the module in your nuxt.config.ts file.

export default defineNuxtConfig({
  // ... other config
  modules: ["@heyo.so/nuxt"],
  heyo: {
    projectId: "your-project-id", // Recommended for developmen
    showByDefault: true,
  },
});

Usage

This module provides a useHeyo composable to interact with the chat widget.

useHeyo()

The useHeyo composable exposes the following methods and properties:

• show(): Show the widget.
• hide(): Hide the widget.
• open(): Open the widget.
• close(): Close the widget.
• identify(meta: Record<string, any>): Identify the user with custom data.
• isReady: Ref<boolean>: A read-only ref that indicates whether the widget is ready to be used.
• isLoading: Ref<boolean>: A read-only ref that indicates whether the widget is currently loading.

Example

<script setup>
import { useHeyo } from '#imports'

const { show, hide, open, close, identify, isReady, isLoading } = useHeyo()

const identifyUser = () => {
  identify({
    name: 'John Doe',
    email: '[email protected]',
  })
}
</script>

<template>
  <div>
    <h1>Heyo Chat Widget</h1>
    <div v-if="isLoading">Loading widget...</div>
    <div v-else-if="isReady">
      <button @click="show">Show</button>
      <button @click="hide">Hide</button>
      <button @click="open">Open</button>
      <button @click="close">Close</button>
      <button @click="identifyUser">Identify</button>
    </div>
  </div>
</template>

## Contribution

<details>
  <summary>Local development</summary>

  ```bash
  # Install dependencies
  npm install

  # Generate type stubs
  npm run dev:prepare

  # Develop with the playground
  npm run dev

  # Build the playground
  npm run dev:build

  # Run ESLint
  npm run lint

  # Run Vitest
  npm run test
  npm run test:watch

  # Release new version
  npm run release