About Formkit Integration ​

FormKit equips developers to build their forms 10x faster by simplifying form structure, generation, validation, theming, submission, error handling, and more.

In combination with PrimeVue it is an excellent choice for form validation.

Formkit - Primevue ​

Helper classes for using Formkit with the PrimeVue UI Framework

Usages ​

A Nuxt 3 Module (PrimeVue and Formkit bundled) under nuxt-primevue

Nuxt 3 PrimeVue Starter and Vite PrimeVue Starter with Formkit support available

Supported Inputs ​

Inputs are used in schema with prime as prefix and the input name as suffix.

E.g. InputMask -> primeInputMask

• Calendar
• Checkbox
• Dropdown
• Editor (HTML Editor)
• InputMask
• InputNumber
• InputSwitch
• InputText
• InputTextarea
• MultiSelect
• Password
• Ranking
• Chips
• Knob
• ColorPicker
• Listbox
• ToggleButton
• SelectButton
• TriStateCheckbox
• RadioButton

Formkit Usage Demo ​

const schema
  = [
  {
    $formkit: 'primeInputMask',
    name: 'myInputMask',
    label: 'Input Mask',
    validation: 'required',
    validationVisibility: 'live',
    mask: '99-999999',
    placeholder: '99-999999',
  },
  {
    $formkit: 'primeInputMask',
    name: 'custom',
    label: 'Input Mask',
    mask: '(999) 999-9999',
    unmask: true,
  },
]
const data = { }

const schema
  = [
  {
    $formkit: 'primeInputMask',
    name: 'myInputMask',
    label: 'Input Mask',
    validation: 'required',
    validationVisibility: 'live',
    mask: '99-999999',
    placeholder: '99-999999',
  },
  {
    $formkit: 'primeInputMask',
    name: 'custom',
    label: 'Input Mask',
    mask: '(999) 999-9999',
    unmask: true,
  },
]
const data = { }

<template>
      <FormKit
        id="form"
        v-model="data"
        type="form"
        :submit-attrs="{
          inputClass: 'p-button p-component',
        }"
        @submit="submitHandler"
      >
        <FormKitSchema :schema="schema" :data="data" />
      </FormKit>
</template>

<template>
      <FormKit
        id="form"
        v-model="data"
        type="form"
        :submit-attrs="{
          inputClass: 'p-button p-component',
        }"
        @submit="submitHandler"
      >
        <FormKitSchema :schema="schema" :data="data" />
      </FormKit>
</template>