# Embedding forms in Vue

Examples use the Composition API with `<script setup>`.

## Iframe embed

```vue
<template>
  <iframe
    title="Cake Order Form"
    src="https://eu.forms.app/form/69d4bd130b443bda40c8f65a"
    allowtransparency="true"
    allowfullscreen="true"
    allow="geolocation; microphone; camera"
    style="width: 100vw; min-width: 100%; height: 600px; border: none;"
  />
</template>
```

## Script embed

Load `embed.js` once, in `onMounted`, then call `new window.formsapp(...)`:

```vue
<script setup>
import { onMounted } from 'vue';

function loadFormsAppScript() {
  return new Promise((resolve) => {
    if (window.formsapp) {
      resolve();
      return;
    }
    const existing = document.querySelector('script[src="https://cdn.formsapp.io/embed.js"]');
    if (existing) {
      existing.addEventListener('load', () => resolve());
      return;
    }
    const script = document.createElement('script');
    script.src = 'https://cdn.formsapp.io/embed.js';
    script.async = true;
    script.defer = true;
    script.onload = () => resolve();
    document.body.appendChild(script);
  });
}

onMounted(async () => {
  await loadFormsAppScript();
  new window.formsapp(
    '69d4bd130b443bda40c8f65a',
    'sidetab',
    {
      button: { color: '#ff9e24', text: 'Click here!' },
      align: { horizontal: 'right', vertical: 'middle' },
      width: '400px',
      height: '500px',
    },
    'https://eu.forms.app',
  );
});
</script>

<template>
  <!-- The side tab creates its own trigger; no placeholder element is needed. -->
</template>
```

## Passing data from a route query parameter

Combine `loadFormsAppScript` above with `vue-router` and the `answers` option from [Passing data to your form](/embeds/passing-form-data):

```vue
<script setup>
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

onMounted(async () => {
  await loadFormsAppScript();
  new window.formsapp(
    '69d4bd130b443bda40c8f65a',
    'standard',
    {
      width: '100vw',
      height: 'formHeight',
      answers: { '63ebad419442ad0448b9e9b6': route.query.ref ?? '' },
    },
    'https://eu.forms.app',
  );
});
</script>

<template>
  <div data-formsapp-src="https://eu.forms.app/form/69d4bd130b443bda40c8f65a" />
</template>
```

## What's next

- [React](/embeds/examples/react) for the equivalent React patterns.
- [Embed options](/embeds/embed-options) for every layout's settings.