# Vue

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.

## 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>
```

## FAQ

### 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.

---

HTML version: https://www.muxforms.com/docs/vue
Source: MuxForms (https://www.muxforms.com)