Formkit - Primevue

Helper classes for using Formkit with the PrimeVue UI Framework

Docs

Docs

Demo/Playground

Usage

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,
}))

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.

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

• All inputs are wrapped in a div with a p-formkit class
• Most Prime Components have access to class / styles attributes
• PT and PTOptions are available (https://primevue.org/passthrough/)
• Styling and PT demo available

Samples

Some samples for common tasks are available

• Repeater (with the help of the useFormKitSchema composable)
• Grid
• Input Editor (let you test the configurations in your schema file)

Showcases

Demo Application

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

Supported Inputs

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

Demo

Demo/Playground