Vue и Nuxt

Подготовьте встраивание#

Включите встраивание для агента и добавьте точные origin локального, предпросмотра и продакшен-развёртываний. Решите, принадлежит ли агент всему приложению или только выбранным компонентам маршрутов.

Плагин Nuxt на весь сайт#

Создайте плагин .client.ts, чтобы никакой DOM-код не выполнялся при серверном рендеринге. Nuxt загружает его один раз в браузере, что сохраняет загрузчик и диалог стабильными между клиентскими переходами.

// 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=20260728-widget-v2";
  script.dataset.agent = slug;
  script.dataset.position = "right";
  script.dataset.label = "Ask us";
  script.async = true;
  document.body.appendChild(script);
});

Не помещайте секреты в runtimeConfig.public; в браузере допустимы только публичный slug сайта и визуальные настройки. Настоящие ключи MAF API и провайдеров остаются в приватной серверной конфигурации.

У плагина на весь сайт намеренно нет очистки при размонтировании: он принадлежит времени жизни приложения Nuxt. При горячей замене модулей в разработке прежний корень может оставаться до полной перезагрузки; защита корня предотвращает второй загрузчик. Проверяйте финальное поведение на чистой продакшен-сборке, а не многократной правкой плагина в одной долгоживущей вкладке.

Компонент Vue для отдельных маршрутов#

Для выбранных маршрутов монтируйте в onMounted и удаляйте и скрипт, и созданный корень в 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=20260728-widget-v2";
  script.dataset.agent = slug;
  script.async = true;
  document.body.appendChild(script);
});

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

Используйте один компонент-владелец. Несколько компонентов с разными slug намеренно создают несколько агентов, что редко желательно.

Если приложение Vue переключает аутентифицированных арендаторов без полной загрузки страницы, трактуйте это как явное снятие/повторный монтаж. Удалите корень старого slug, проверьте публичный slug нового арендатора по доверенному состоянию приложения, затем добавьте новый скрипт. Изменение script.dataset.agent после выполнения загрузчика не перенацеливает существующий iframe.

Заголовки безопасности сайта по-прежнему действуют для вывода Nuxt/Vue. Добавьте origin загрузчика/фрейма в CSP и разрешайте микрофон только при включённом голосе; клиентский плагин не может переопределить политику браузера на уровне ответа.

Проверьте SSR и маршрутизацию#

1. Запустите продакшен-сборку Nuxt/Vue и убедитесь, что нет ошибки document is not defined.
2. Загрузите маршрут со встраиванием напрямую и убедитесь, что корень один.
3. Переходите на клиенте и проверьте поведение на весь сайт против поведения по маршруту.
4. Проверьте embed.js, iframe, CSP и точный origin.
5. Отправьте сообщение и проверьте поведение на мобильном и с микрофоном.

Решение проблем#

Npm-адаптер для Vue/Nuxt пока не опубликован; этот гайд использует поддерживаемый размещённый загрузчик напрямую.