File tree Expand file tree Collapse file tree 6 files changed +119
-83
lines changed Expand file tree Collapse file tree 6 files changed +119
-83
lines changed Original file line number Diff line number Diff line change 11# Formkit - Primevue
22
3- Helper classes for using [ FormKit] ( https://formkit.com/ ) with the [ PrimeVue UI Framework] ( https://www.primefaces.org/primevue/#/ )
3+ PrimeVue based formkit inputs for using [ FormKit] ( https://formkit.com/ ) with the [ PrimeVue UI Framework] ( https://www.primefaces.org/primevue/#/ ) .
4+
5+ Main focus of this project is to provide configuration based forms with validation.
46
57## PrimeVue Versions
68
7- Actual PrimeVue Version in the main branch is 4.x.
9+ Actual PrimeVue Version in the main branch is * 4.x.*
810
911PrimeVue 3 is in the prime3 branch.
1012
@@ -16,6 +18,11 @@ PrimeVue 3 is in the prime3 branch.
1618
1719## Usage
1820
21+ ### Configuration
22+
23+ Add * formkit.config.ts*
24+
25+
1926``` typescript
2027import { defaultConfig , plugin } from ' @formkit/vue'
2128import { primeInputs } from ' @sfxcode/formkit-primevue'
@@ -28,6 +35,32 @@ app.use(plugin, defaultConfig({
2835}))
2936```
3037
38+ ### Nuxt
39+
40+ Important: use * autoimport: false* if using primevue formkit validation and include or
41+ exclude not needed components as usual.
42+
43+ Autoimport true prevents elements lookup correctly.
44+
45+ Example:
46+ ``` typescript
47+ primevue : {
48+ autoImport : false ,
49+ components : {
50+ exclude : [' Chart' , ' Editor' ],
51+ },
52+ options : {
53+ theme : {
54+ preset : Aura ,
55+ options : {
56+ darkModeSelector : ' .dark' ,
57+ },
58+ },
59+ ripple : true ,
60+ },
61+ },
62+ ```
63+
3164## Limitations
3265
3366Prefixing of the PrimeVue component names is not supported.
Original file line number Diff line number Diff line change @@ -12,6 +12,13 @@ $ pnpm add -D @sfxcode/formkit-primevue
1212
1313Make sure all components of PrimeVue you want to use are enabled in your configuration.
1414
15+ ::: warning Nuxt 3 / 4
16+
17+ Important: use * autoimport: false* if using primevue formkit validation and include or
18+ exclude not needed components as usual.
19+
20+ Autoimport true prevents elements lookup correctly.
21+ :::
1522### Formkit Config
1623
1724Add a formkit.config.ts to your root dir and register primeInputs for FormKit.
Original file line number Diff line number Diff line change 22
33In some inputs options are needed. There are several ways to deal with the options.
44
5- ::: warning Important Note
6- Until Version 1.5.x only Object Array / Select Object by key and value by key was possible. This is fixed from 1.6.x.
7- :::
8-
95## Option based Inputs
106
117- Dropdown
Original file line number Diff line number Diff line change 1515
1616features :
1717- title : " Formkit-PrimeVue"
18- details : PrimeVue support for the FormKit validation Framwork . PrimeVue inputs are prepared for seamless FormKit integration.
18+ details : PrimeVue support for the FormKit validation Framework . PrimeVue inputs are prepared for seamless FormKit integration.
1919- title : " PrimeVue"
2020 details : Next Generation Vue UI Component Library. Rich set of open source native components for Vue.
2121- title : " FormKit"
Original file line number Diff line number Diff line change 132132 "vue" : " ^3.4.31" ,
133133 "vue-demi" : " ^0.14.8" ,
134134 "vue-router" : " ^4.4.0" ,
135- "vue-tsc" : " ^2.0.24 "
135+ "vue-tsc" : " ^2.0.26 "
136136 }
137137}
You can’t perform that action at this time.
0 commit comments