Getting Started #

The library can be used in VUE3 based Applications and also provides helpers to be used in Server Site environments like Laravel Applications

Prerequisites #

Make sure that you have access to the IU J-Frog npm registry. https://careerpartner.atlassian.net/wiki/spaces/MAR/pages/3794567514/JFrog+Artifactory

Install the library and its peer dependencies #

npm install @iu/martech-forms @headlessui/vue @popperjs/core @vee-validate/i18n @vee-validate/rules @vueuse/core flatpickr maska pinia vee-validate vue

Vue3 Applications #

Setup #

The form library needs maska and vee-validate registered on your vue application

import { createApp } from 'vue'
import Maska from 'maska'
import { validations } from '@iu/martech-forms'

const app = createApp(/* */)
app.use(validations)
app.use(Maska)

Usage #

After that, you can simply use the library components in your Application wrap your fields in a form component and your good to go.

<template>
  <IuForm>
    <IuSelect
      label="Demo"
      name="demo"
      :options="[
        { name: 'Field 1', value: 'field_1' },
        { name: 'Field 2', value: 'field_2' },
      ]"
      placeholder="Einfach auswählen"
      searchable></IuSelect>
  </IuForm>
</template>
<script setup>
import { IuForm, IuSelect } from '@iu/martech-forms'
</script>

Server Side Applications #

Markup #

In Server Site Applications you have to provide a container for your Form. This Container needs an Specific ID for registering the form and the iu-form class for style isolation.

<div id="one" class="iu-form">....</div>

In this Container you can use all your registered form components like this:

<div id="one" class="iu-form">
  <div>a standard html element</div>
  <IuSelect
    label="Demo"
    name="demo"
    :options="[{ name: 'Field 1', value: 'field_1' }, { name: 'Field 2', value: 'field_2' }]"
    placeholder="Einfach auswählen"
    searchable></IuSelect>
</div>

Registration #

To make this work you have to register the form and the fields you want to use in your pages javascript:

import { registerVueForm, IuSelect } from '@iu/martech-forms'

registerVueForm(
  'one', // id of your container
  {
    // props for your form component (see docs :-))
    submitUrl: '/api/submit',
  },
  {
    // components you want to use in your form
    IuSelect,
  },
  {
    // custom validation rules if needed. See docs
  }
)