Formkit - Primevue

Helper classes for using Formkit with the PrimeVue UI Framework

PrimeVue Versions

Actual PrimeVue Version in main branch is 3.x. PrimeVue 4 RC2 is prepared in the prime4 branch. First published release for PrimeVue 4 is 2.0.0 (actually built with primevue 4.0.0-rc.2). After Release of PrimeVue 4 Final prime4 will be merged in the main branch. Feel free to test it ot ...

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