refactor(formkit-nuxt): Replace plugin installation of formkit with formkit-nuxt

BREAKING CHANGE: With the use of formkit-nuxt path to a formkit.config.ts must be provided or a formkit.config.ts must exits in your base path - formkitAutoConfig module option is replaced by installFormKit

Author: sfxcode

README.md

@@ -14,11 +14,17 @@ Based on [sfxcode/formkit-primevue](https://github.com/sfxcode/formkit-primevue)
 
 ## Features
 
-<!-- Highlight some of the features your module provide here -->
 - ⛰ &nbsp;Validation by FormKit
 - 🚠 &nbsp;UI by PrimeVue
 - 🏎 &nbsp;Auto import for formkit-primevue components and composables
-- 
+
+## Nuxt Module Dependencies
+
+- primevue-nuxt Module
+- formkit-nuxt Module
+
+Both are auto installed by default, this can be disabled in the module options.
+
 ## Quick Setup
 
 Install the module to your Nuxt application with one command:
@@ -29,43 +35,37 @@ npx nuxi module add @sfxcode/formkit-primevue-nuxt
 
 That's it! You can now use FormKit PrimeVue Nuxt Module in your Nuxt app ✨
 
+
 ## Module Options
 
 - **includePrimeIcons** (default: `true`): Add PrimeIcons CSS to the project.
 - **includeStyles** (default: `true`): Add custom FormKit CSS to the project.
-- **formkitAutoConfig** (default: `true`): Automatically configure FormKit.
-- **formkitLocale** (default: `'en'`): Set the FormKit local (Only hen formkitAutoConfig is `true`).
-- **formkitPluginAnimate** (default: `true`): Enable FormKit animate plugin (Only hen formkitAutoConfig is `true`).
-- **formkitPluginAsterisk** (default: `true`): Enable FormKit asterisk plugin (Only hen formkitAutoConfig is `true`).
 - **installI18N** (default: `true`): Install nuxt i18n module automatically.
+- **installFormKit** (default: `true`): Install nuxt formkit module automatically.
 
-### Custom Global FormKit Configuration
+### Removed options since 1.2.0
+- **formkitAutoConfig** : Automatically configure FormKit. => Removed in favor of **installFormKit**
+- **formkitLocale** ,**formkitPluginAnimate**, **formkitPluginAsterisk** : use  **formkit.config.ts** for custom configuration
 
-You can also provide a custom FormKit configuration by adding the following configuration to your `nuxt.config.ts`:
+### FormKit Configuration
 
-```ts
-  formkitPrimevue: {
-    formkitAutoConfig: false
-}
-```
-
-and creating a custom nuxt plugin in the `plugins` directory:
+Use a formkit.config.ts file to configure FormKit.
 
-for example `plugins/formkit.ts`:
 ```ts
-import { defaultConfig, plugin } from '@formkit/vue'
+// formkit.config.ts
+import type { DefaultConfigOptions } from '@formkit/vue'
 import { primeInputs, primeOutputs } from '@sfxcode/formkit-primevue'
 
-export default defineNuxtPlugin((nuxtApp) => {
-  // Doing something with nuxtApp
-  const app = nuxtApp.vueApp
-  app.use(plugin, defaultConfig({
-    inputs: { ...primeInputs, ...primeOutputs },
-    // ... additional configurations like locales, plugins, custom validations etc.
-  }))
-})
+const config: DefaultConfigOptions = {
+  // Define the active locale
+  inputs: { ...primeInputs, ...primeOutputs },
+}
+
+export default config
 
 ````
+
+
 ## Additional Configuration
 
 For i18n support, you can add the following configuration to your `nuxt.config.ts`:

playground/formkit.config.ts

@@ -4,13 +4,13 @@ export default defineNuxtConfig({
   modules: ['../src/module'],
   devtools: { enabled: true },
   compatibilityDate: '2024-11-03',
+  formkit: {
+    configFile: '../src/runtime/formkit.config.ts',
+  },
   formkitPrimevue: {
     includePrimeIcons: true,
     includeStyles: true,
-    formkitAutoConfig: true,
-    formkitLocale: 'en',
-    formkitPluginAnimate: true,
-    formkitPluginAsterisk: true,
+    installFormKit: true,
     installI18N: true,
   },
   i18n: {

playground/nuxt.config.ts

@@ -11,10 +11,7 @@ import defu from 'defu'
 export interface ModuleOptions {
   includePrimeIcons: boolean
   includeStyles: boolean
-  formkitAutoConfig: boolean
-  formkitLocale: 'en' | 'de' | 'fr' | 'es' | 'tr'
-  formkitPluginAsterisk: boolean
-  formkitPluginAnimate: boolean
+  installFormKit: boolean
   installI18N: boolean
 }
 
@@ -30,28 +27,17 @@ export default defineNuxtModule<ModuleOptions>({
   defaults: {
     includePrimeIcons: true,
     includeStyles: true,
-    formkitAutoConfig: true,
-    formkitLocale: 'en',
-    formkitPluginAnimate: true,
-    formkitPluginAsterisk: true,
+    installFormKit: true,
     installI18N: true,
   },
   async setup(_options, _nuxt) {
-    _nuxt.options.runtimeConfig.public.formkitPrimevue = defu(_nuxt.options.runtimeConfig.public.formkitPrimevue,
-      {
-        formkitAutoConfig: _options.formkitAutoConfig,
-        formkitLocale: _options.formkitLocale,
-        formkitPluginAnimate: _options.formkitPluginAnimate,
-        formkitPluginAsterisk: _options.formkitPluginAsterisk,
-      },
-    )
-
     const resolver = createResolver(import.meta.url)
     await installModule('@primevue/nuxt-module')
     // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
     addPlugin(resolver.resolve('./runtime/plugin'))
 
-    await installModule('@formkit/nuxt', { defaultConfig: true, configFile: 'formkit.config.ts', autoImport: true })
+    if (_options.installFormKit)
+      await installModule('@formkit/nuxt')
 
     if (_options.installI18N)
       await installModule('@nuxtjs/i18n')

src/module.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: 'de',
+  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

src/runtime/formkit.config.ts

@@ -1,10 +1,5 @@
-import { primeInputs, primeOutputs, usePrimeInputs } from '@sfxcode/formkit-primevue'
-import { addPrimeAsteriskPlugin } from '@sfxcode/formkit-primevue/plugins'
-import { createAutoAnimatePlugin } from '@formkit/addons'
-import { de, en, es, fr, tr } from '@formkit/i18n'
-import { defaultConfig, plugin, ssrComplete, resetCount } from '@formkit/vue'
-import type { FormKitPlugin } from '@formkit/core'
-import { useRuntimeConfig } from '#app/nuxt'
+import { usePrimeInputs } from '@sfxcode/formkit-primevue'
+
 import { defineNuxtPlugin } from '#app'
 
 export default defineNuxtPlugin((_nuxtApp) => {
@@ -14,40 +9,4 @@ export default defineNuxtPlugin((_nuxtApp) => {
 
   const { registerInputs } = usePrimeInputs()
   registerInputs(app)
-  //
-  // if (runtimeConfig.public.formkitPrimevue.formkitAutoConfig) {
-  //   const formkitPlugins: FormKitPlugin[] = []
-  //   if (runtimeConfig.public.formkitPrimevue.formkitPluginAsterisk) {
-  //     formkitPlugins.push(addPrimeAsteriskPlugin)
-  //   }
-  //   if (runtimeConfig.public.formkitPrimevue.formkitPluginAnimate) {
-  //     formkitPlugins.push(createAutoAnimatePlugin(
-  //       {
-  //         /* optional AutoAnimate config */
-  //         // default:
-  //         duration: 250,
-  //         easing: 'ease-in-out',
-  //       },
-  //       {
-  //         /* optional animation targets object */
-  //         // default:
-  //         global: ['outer', 'inner'],
-  //         form: ['form'],
-  //         repeater: ['items'],
-  //       },
-  //     ))
-  //   }
-  //   app.use(plugin, defaultConfig({
-  //     locales: { de, en, es, fr, tr },
-  //     // Define the active locale
-  //     locale: runtimeConfig.public.formkitPrimevue.formkitLocale,
-  //     inputs: { ...primeInputs, ...primeOutputs },
-  //     plugins: formkitPlugins,
-  //   }))
-  // }
-  //
-  // _nuxtApp.hook('app:rendered', () => {
-  //   resetCount()
-  //   ssrComplete(_nuxtApp.vueApp)
-  // })
 })