Formkit - Primevue

PrimeVue based FormKit Inputs for using FormKit with the PrimeVue UI Framework.

Main focus of this project is to provide configuration based forms with validation.

In addition, you can use the same pattern for data output from schema using PrimeOutputs.

PrimeVue Versions

Actual PrimeVue Version of the main branch is 4.x.

PrimeVue 3 is in the prime3 branch, but future development will only focus on PrimeVue 4

Docs

Demo/Playground

Usage

Configuration

Add formkit.config.ts

import { defaultConfig, plugin } from '@formkit/vue'
import { primeInputs } from '@sfxcode/formkit-primevue'

app.use(plugin, defaultConfig({
  locales: { de, en },
  // Define the active locale
  locale: 'en',
  inputs: primeInputs, 
}))

or if using also the output part

import { defaultConfig, plugin } from '@formkit/vue'
import { primeInputs, primeOutputs } from '@sfxcode/formkit-primevue'

app.use(plugin, defaultConfig({
  locales: { de, en },
  // Define the active locale
  locale: 'en',
    inputs: { ...primeInputs, ...primeOutputs },
}))

Important: output elements depends on vue-i18n to style numbers, dates, ...

Nuxt

Important: use autoimport: false if using PrimeVue-FormKit validation and include or exclude not needed components as usual.

Autoimport true prevents elements lookup correctly.

Example:

  primevue: {
  autoImport: false,
    components: {
    exclude: ['Chart', 'Editor'],
  },
  options: {
    theme: {
      preset: Aura,
        options: {
        darkModeSelector: '.dark',
      },
    },
    ripple: true,
  },
},

Limitations

Prefixing of the PrimeVue component names is not supported.

Schema Helper Functions

useFormKitSchema provide functions to simplify the usage of elements, components, lists, ...

useInputEditorSchema provide functions for a component schema generation builder

Basic Styling

Basic styling is provided with the formkit-primevue.scss file or the corresponding css file in the package.

Features:

Width of all text and dropdown elements is set to 100%
Error Color by variable (--formkit-error-color)
Some margins, font sizes ...

You can use it or take it as base for your own styling.

Extended Styling

Styling outerClas, innerClass .... is provided by FormKit
All inputs, outputs are wrapped in a div with a p-formkit class
Most of the Prime Input Components have access to class / styles attributes
PT and PTOptions are available (https://primevue.org/passthrough/)
Styling and PT demo available
Grid Demo of the provided grid styling (col-[1-12])

Samples

Some samples for common tasks are available

Repeater Use Repeater composable for using repeating values in your schema
Input Editor Edit FormKit schema on the based on a provided composable
Form Editor Basic demo as starter to create Forms visually

Showcases

Demo Application

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

Supported Inputs for PrimeVue 4

AutoComplete
CascadeSelect
Checkbox
ColorPicker
DatePicker
Editor (HTML Editor)
InputMask
InputNumber
InputOtp
InputText
Knob
Listbox
MultiSelect
Password
RadioButton
Rating
Select
SelectButton
Slider
Textarea
ToggleButton
ToggleSwitch
TreeSelect