See /docs/nuxt for useHead and client-only mounting.

onMounted + template ref is enough.

POST JSON with axios/fetch and ingest secret from your API.

Allow http://localhost:5173 on the form.

MuxForms on Vue 3 loads embed.js in index.html or main.ts, then uses window.MuxForms.mount(el) in onMounted when data-form-id is inside a routed view. Allow your SPA origin.

Docs

Vue

Vue SPAs re-render routes client-side—load embed.js once and mount the form container when the contact view appears.

Vue (Vite)

Step	Action
index.html	defer embed.js
ContactView.vue	ref + onMounted mount
Router	Remount when route re-enters
Allowlist	https://app.example.com

ContactView.vue

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

const root = ref<HTMLElement | null>(null);

onMounted(() => {
  if (root.value && window.MuxForms?.mount) {
    window.MuxForms.mount(root.value);
  }
});
</script>

<template>
  <h1>Contact</h1>
  <div ref="root" data-form-id="FORM_UUID"></div>
</template>

index.html

<script src="https://www.muxforms.com/embed.js" defer></script>

Related: Nuxt integration.

Common questions

Nuxt?: See /docs/nuxt for useHead and client-only mounting.
Composition API?: onMounted + template ref is enough.
Custom form UI?: POST JSON with axios/fetch and ingest secret from your API.
HMR during dev?: Allow http://localhost:5173 on the form.

Vue UI, hosted ingest.

Mount on route enter; same pattern for modal contact drawers.

Upgrade to Pro