SSR hydration errors?

Keep the embed container client-only; the script runs in the browser only.

POST /api/contact with secret for bespoke forms.

One form id per tenant or hidden field for tenant slug.

Same mount pattern as /docs/vue.

MuxForms on Nuxt 3 adds embed.js with useHead on pages/contact.vue, wraps the form div in ClientOnly, and calls MuxForms.mount in onMounted. Allow your Vercel/Netlify Nuxt URL.

Docs

Nuxt

Nuxt SSR can still use MuxForms in the browser—load the script on the contact route and mount after hydration.

Nuxt 3

API	Usage
useHead	script src embed.js
ClientOnly	Avoid SSR mismatch on form div
onMounted	MuxForms.mount
server/api	Optional proxy with ingest secret

pages/contact.vue

<script setup lang="ts">
useHead({
  script: [{ src: "https://www.muxforms.com/embed.js", defer: true }],
});

const el = ref<HTMLElement | null>(null);
onMounted(() => {
  if (el.value) window.MuxForms?.mount(el.value);
});
</script>

<template>
  <ClientOnly>
    <div ref="el" data-form-id="FORM_UUID" />
  </ClientOnly>
</template>

Common questions

SSR hydration errors?: Keep the embed container client-only; the script runs in the browser only.
Nitro server route?: POST /api/contact with secret for bespoke forms.
Multi-tenant sites?: One form id per tenant or hidden field for tenant slug.
Vue version?: Same mount pattern as /docs/vue.

Nuxt marketing sites need leads too.

Allow production origin once per deployment target.

Upgrade to Pro