USAGE:

This Package is supposed to be used to offer Services from acourse on customer Websites with vue 3.

First import CSS. Important: Please import the file at the very beginning, before any other potential tailwindcss import.

import "@acourse/forms/dist/style.css";

Initialize the Form:

1. With URL from the Web App

<template>
    <div id="form" /> 
</template>
<script setup lang="ts">

import { Form } from "@acourse/forms";

const form = new Form({
    key: KEY,
    url: URL
});

onMounted(() => {
    form.fetchForm().then(() => {
        form.mount();
    });
})
</script>

2. With Key and T Parameter

<template>
    <div id="form" /> 
</template>
<script setup lang="ts">
import { Form } from "@acourse/forms";

const form = new Form({
    key: KEY,
    t: T
});

onMounted(() => {
    form.fetchForm().then(() => {
        form.mount();
    });
})
</script>

3. With own Fetch Logic

<template>
    <div id="form" /> 
</template>
<script setup lang="ts">

import { Form } from "@acourse/forms";

const preFetchedDefinition: FormDto
const form = new Form({
    key: KEY
});

onMounted(() => {
   form.setForm(preFetchedDefinition);
   form.mount();
})
</script>