chore(package): update to formkit-primevue-nuxt module 1.2.2, add needed formkit.config.ts and modify nuxt.config.ts to changed properties for formkitPrimevue

Author: sfxcode

README.md

@@ -25,9 +25,9 @@ THX to [antfu / Vitesse Nuxt3](https://github.com/antfu/vitesse-nuxt3) for start
 ## Nuxt Modules (included in formkit-prinevue-nuxt)
 
 - [FormKit-PrimeVue-Nuxt](https://github.com/sfxcode/formkit-primevue-nuxt) - FormKit PrimeVue Nuxt Module
-- [PrimeVue-Nuxt](https://primevue.org/nuxt/) PrimeVue Nuxt Module
-- [FormKit](https://formkit.com/) - Validation
-- [I18n](https://v8.i18n.nuxtjs.org) - Integration with [Vue I18n](https://vue-i18n.intlify.dev/)
+- [PrimeVue-Nuxt](https://primevue.org/nuxt/) PrimeVue UI Framework
+- [FormKit-Nuxt](https://formkit.com/) - Form Handling
+- [I18n-Nuxt](https://v8.i18n.nuxtjs.org) - Integration with [Vue I18n](https://vue-i18n.intlify.dev/)
 
 ## Nuxt Modules (additional)
 
@@ -43,14 +43,15 @@ THX to [antfu / Vitesse Nuxt3](https://github.com/antfu/vitesse-nuxt3) for start
 
 ### FormKit PrimeVue Nuxt
 
+Module options for FormKit PrimeVue Nuxt.
+Below are the default values, if they fit your needs, you don't need to add them to your nuxt.config.ts.
+
 ```typescript
-formkitPrimevue: {
-    includePrimeIcons: true,
+  formkitPrimevue: {
+  includePrimeIcons: true,
     includeStyles: true,
-    formkitAutoConfig: true,
-    formkitLocale: 'en',
-    formkitPluginAnimate: true,
-    formkitPluginAsterisk: true,
+    installFormKit: true,
+    installI18N: true,
 },
 ```
 

formkit.config.ts

@@ -0,0 +1,34 @@
+// formkit.config.ts
+import type { DefaultConfigOptions } from '@formkit/vue'
+import { createAutoAnimatePlugin } from '@formkit/addons'
+import { de, en } from '@formkit/i18n'
+import { primeInputs, primeOutputs } from '@sfxcode/formkit-primevue'
+import { addPrimeAsteriskPlugin } from '@sfxcode/formkit-primevue/plugins'
+
+const config: DefaultConfigOptions = {
+  locales: { en, de },
+  // Define the active locale
+  locale: 'en',
+  inputs: { ...primeInputs, ...primeOutputs },
+
+  plugins: [
+    createAutoAnimatePlugin(
+      {
+        /* optional AutoAnimate config */
+        // default:
+        duration: 250,
+        easing: 'ease-in-out',
+      },
+      {
+        /* optional animation targets object */
+        // default:
+        global: ['outer', 'inner'],
+        form: ['form'],
+        repeater: ['items'],
+      },
+    ),
+    addPrimeAsteriskPlugin,
+  ],
+}
+
+export default config

nuxt.config.ts

@@ -20,18 +20,15 @@ export default defineNuxtConfig({
   },
 
   modules: [
-    '@unocss/nuxt',
     '@pinia/nuxt',
     '@nuxt/content',
     '@vueuse/nuxt',
     '@nuxt/test-utils/module',
     '@nuxt/image',
     '@nuxt/fonts',
     '@sfxcode/formkit-primevue-nuxt',
+    '@unocss/nuxt',
   ],
-  formkit: {
-    autoImport: true,
-  },
   content: {
     highlight: {
       theme: 'one-dark-pro',
@@ -54,10 +51,8 @@ export default defineNuxtConfig({
   formkitPrimevue: {
     includePrimeIcons: true,
     includeStyles: true,
-    formkitAutoConfig: true,
-    formkitLocale: 'en',
-    formkitPluginAnimate: true,
-    formkitPluginAsterisk: true,
+    installFormKit: true,
+    installI18N: true,
   },
   primevue: {
     autoImport: true,

package.json

@@ -33,7 +33,7 @@
     "@nuxt/test-utils": "^3.14.4",
     "@pinia/nuxt": "^0.7.0",
     "@primevue/themes": "^4.2.2",
-    "@sfxcode/formkit-primevue-nuxt": "^1.1.7",
+    "@sfxcode/formkit-primevue-nuxt": "^1.2.2",
     "@tiptap/extension-highlight": "^2.9.1",
     "@tiptap/extension-text-align": "^2.9.1",
     "@tiptap/extension-text-style": "^2.9.1",
@@ -55,6 +55,7 @@
     "unstorage": "^1.13.1",
     "vitest": "^2.1.5",
     "vue-sidebar-menu": "^5.4.2"
+
   },
   "packageManager": "[email protected]+sha256.ccce81bf7498c5f0f80e31749c1f8f03baba99d168f64590fc7e13fad3ea1938"
 }