Nuxt module improvement suggestions about formkit

[justin-schroeder]

Thanks for the feedback @pi0! We'll make these changes soon.

[justin-schroeder]

@pi0 — I refactored most of the module in this most recent push — including using resolvePath and reducing the templating significantly. It now only has 2 simple template outputs. Honestly I would love to get rid of the template all together, but as far as I can tell there is no way to pass functions and other non serializable data to a nuxt plugin from a nuxt module using addPlugin (or is there?).

FormKit uses lots of user-defined functions in its configuration (like plugin functions for example) — so as far as I know, I still need to use the template to "manually" write those import statements (is my assumption true?)

[pi0]

Amazing work @justin-schroeder ! Added two comments to 0cbfab5 hopefully solving template issue.

[justin-schroeder]

@pi0 — ok, played around with the nuxt.options.alias a bit to try and fully remove the template — but I've fallen short. I need to import a named import (import { defaultConfig } from '@fomrkit/core') based on the module option option.defaultConfig. So for example, the final template output could be 1 of 3 variations:

1. No configFile or detected config file provided:

import { defineNuxtPlugin } from '#app'
import { plugin, defaultConfig } from '@formkit/vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(plugin, defaultConfig)
})

2. formkit.config.(ts|mjs|js) exists and defaultConfig is true (default)

import { defineNuxtPlugin } from '#app'
import { plugin, defaultConfig } from '@formkit/vue'
import config from './path/to/formkit.config.ts'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(plugin, defaultConfig(config))
})

3. formkit.config.(ts|mjs|js) is false and defaultConfig is false

In this case they provide the entire config setup, so we don’t import defaultConfig at all:

import { defineNuxtPlugin } from '#app'
import { plugin } from '@formkit/vue'
import config from './path/to/formkit.config.ts'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(plugin, config)
})

If I understand correctly, I can alias import config from '#formkit-config' to be the path to formkit.config.ts file which solves 1 import question, but doesn't solve the variability of the named import { defaultConfig } from '@formkit/vue'. If users dont want the defaultConfig I dont want to import it since it includes a lot of default weight people may not want to absorb.

Is this a use case for keeping the template around, or are there other paths forward?

[pi0]

We can think of some ideas to alias config to an empty alias (like #empty) but we could also use a dynamic import template from the module:

addTemplate({
  filename: '#fromkit-config'
  getContents: () => { /* dynamic logic to generate exportstatement */ return 'export default ...' }
})

This way we can still avoid lodash template in plugin while having full control over logic using a template for config.

[andrew-boyd]

We've been able to remove the lodash templates in the latest release. Closing this one!