Nuxt Integration

Add the Asyntai AI chat assistant to your Nuxt site

Overview

Nuxt is a website framework built on Vue. The Asyntai integration is a Nuxt module. Add it to your Nuxt configuration, build the site, and the chat bubble is on every page.

The assistant answers your visitors from your own content, in more than 80 languages, day and night.

Requirements

Nuxt 3 or Nuxt 4
Node 18 or later
An Asyntai account. The Free plan is enough to try the widget

Installation

Follow these steps to add Asyntai to your Nuxt site:

Get Your Widget ID

Sign in to Asyntai and open the Install page. The widget ID is the value of data-asyntai-id in the snippet shown there. It starts with asyntai_.

Add the Module

Run this command in your project folder:

npx nuxi module add nuxt-ai-chatbot

You can also run npm install nuxt-ai-chatbot and add the module by hand.

Set the Widget ID

Open nuxt.config.ts and put your widget ID in the asyntai block:

export default defineNuxtConfig({
  modules: ['nuxt-ai-chatbot'],
  asyntai: {
    widgetId: 'asyntai_1a2b3c4d5e6f',
  },
});

Build the Site

Run npm run build or npm run generate and publish. Open your site and the chat bubble is in the corner of every page.

Options

Option	Type	Default	What it does
`widgetId`	string	required	Your Asyntai widget ID
`enableInDevelopment`	boolean	`true`	Set it to `false` to keep the widget off the site during `nuxt dev`
`scriptUrl`	string	the Asyntai CDN	Advanced. Load the widget from another URL

A missing or malformed widgetId stops the build with a message that says how to fix it.

How It Works

The module adds the Asyntai loader to the end of the body of every page. The loader waits for the page's load event, so your own content always renders first.

It works with nuxt build and nuxt generate, and the chat stays open while the visitor moves between pages. TypeScript types ship with the package, so the asyntai block in nuxt.config.ts is typed.

Answering From Your Content

Asyntai reads your published pages. Add your site URL in the dashboard, and the assistant answers from the same pages the widget sits on. You can also add documents, and question and answer pairs.

Tip: Set enableInDevelopment: false while you work on the site. The widget then shows up only on the built site.

Removing It

Delete the module from nuxt.config.ts and build again. The chat bubble is gone.

Plans & Pricing

The module is free. View pricing.

Need Help?

If you have any questions or run into issues, contact us at [email protected].

Documentation