Vue y Nuxt

Prepara la incrustación#

Activa Mostrarlo en mi sitio web para el agente (página del agente → Ponlo en marcha → Widget para sitio web) y añade el origen exacto de cada despliegue local, de vista previa y de producción en Direcciones de sitio web permitidas. Decide si el agente pertenece a toda la aplicación o solo a determinados componentes de ruta.

Plugin de Nuxt para todo el sitio#

Crea un plugin .client.ts para que no se ejecute código del DOM durante el renderizado en el servidor. Nuxt lo carga una sola vez en el navegador, lo que mantiene estables el lanzador y la conversación durante la navegación en el cliente.

// plugins/make-agent-fast.client.ts
const slug = "YOUR_SITE_SLUG";

export default defineNuxtPlugin(() => {
  if (document.getElementById(`maf-embed-root-${slug}`)) return;

  const script = document.createElement("script");
  script.id = "maf-agent";
  script.src = "https://makeagent.fast/embed.js?v=20261022-open";
  script.dataset.agent = slug;
  script.dataset.position = "right";
  script.dataset.label = "Ask us";
  script.async = true;
  document.body.appendChild(script);
});

No pongas ningún secreto en runtimeConfig.public; en el navegador solo deben ir el slug público del sitio y los ajustes visuales. Las claves reales de la API de MAF y de los proveedores se quedan en la configuración privada del entorno de ejecución del servidor.

El plugin para todo el sitio no incluye limpieza al desmontar de forma intencionada: pertenece al ciclo de vida de la aplicación Nuxt. Durante el reemplazo de módulos en caliente (HMR) en desarrollo, una raíz anterior puede permanecer hasta que se haga una recarga completa; la comprobación de la raíz evita que aparezca un segundo lanzador. Verifica el comportamiento final con una compilación de producción limpia, en lugar de editar el plugin repetidamente en una misma pestaña de larga duración.

Componente de Vue limitado a rutas#

Para rutas concretas, monta el loader en onMounted y elimina tanto el script como la raíz generada en onBeforeUnmount.

<script setup lang="ts">
import { onBeforeUnmount, onMounted } from "vue";

const slug = "YOUR_SITE_SLUG";
let script: HTMLScriptElement | null = null;

onMounted(() => {
  if (document.getElementById(`maf-embed-root-${slug}`)) return;
  script = document.createElement("script");
  script.id = "maf-agent";
  script.src = "https://makeagent.fast/embed.js?v=20261022-open";
  script.dataset.agent = slug;
  script.async = true;
  document.body.appendChild(script);
});

onBeforeUnmount(() => {
  script?.remove();
  document.getElementById(`maf-embed-root-${slug}`)?.remove();
});
</script>

Usa un único componente responsable. Varios componentes con slugs distintos crean varios agentes a propósito, algo que rara vez es deseable.

Si una aplicación Vue cambia de tenant autenticado sin recargar la página por completo, trátalo como un desmontaje y remontaje explícitos. Elimina la raíz del slug anterior, valida el slug público del nuevo tenant a partir de un estado de la aplicación de confianza y luego añade un nuevo script. Cambiar script.dataset.agent después de que el loader se haya ejecutado no redirige el iframe existente.

Las cabeceras de seguridad del host se siguen aplicando a la salida de Nuxt/Vue. Añade el origen del loader y del frame a la CSP y permite el micrófono solo cuando la voz esté activada; un plugin exclusivo del cliente no puede anular una política del navegador definida a nivel de respuesta.

Verifica el SSR y el enrutamiento#

1. Ejecuta la compilación de producción de Nuxt/Vue y confirma que no aparece el error document is not defined.
2. Carga directamente una ruta que tenga la incrustación y confirma que hay una sola raíz.
3. Navega en el cliente y comprueba el comportamiento para todo el sitio frente al limitado a rutas.
4. Inspecciona embed.js, el iframe, la CSP y el origen exacto.
5. Envía un mensaje y prueba el comportamiento en móvil y con el micrófono.

Solución de problemas#

Actualmente no se publica ningún adaptador de npm para Vue/Nuxt; esta guía usa directamente el loader alojado compatible.