Lazy loading FormKit with Nuxt

[dulnan]

I'm using FormKit in a few Nuxt projects to build content heavy websites, with only a few pages using forms at all. Loading FormKit on each page adds quite a lot to the bundle size: In my case the size of the entry bundle increases from 74 KB to 117KB.

Looking through @formkit/nuxt I saw it would actually be quite easy to load and initialise FormKit only when needed. I made a small proof of concept in one project that basically moves all imports currently done in the plugin to a separate file (which I put in a helpers folder, but could be a file generated by the module):

./helpers/formkitLoader.ts

import { plugin, defaultConfig, ssrComplete } from '@formkit/vue'
import { resetCount } from '@formkit/core'
import customConfig from './../formkit.config'

const config = defaultConfig(customConfig)

export { plugin, config, resetCount, ssrComplete }

I then created the following composable that, when called, dynamically imports the helper file and does the same thing as the current plugin does:

./composables/initFormKit.ts

export async function initFormKit() {
  const nuxtApp = useNuxtApp()
  if (nuxtApp.__formkit_loaded) {
    return
  }
  nuxtApp.__formkit_loaded = true
  const { plugin, config, resetCount, ssrComplete } = await import(
    './../helpers/formkitLoader'
  )
  nuxtApp.hook('app:rendered', () => {
    resetCount()
    ssrComplete(nuxtApp.vueApp)
  })
  nuxtApp.vueApp.use(plugin, config)
}

The downside is that this requires calling await initFormKit() in each component that uses FormKit (or a parent component, like a page). But that could be solved by introducing a <FormKitProvider> component that basically does what the composable is doing.

My first tests showed that this works without any problems, both client side and for SSR. I specifically made sure to not run into memory leaks and can confirm that this is not the case.

Happy to create a MR for this feature if it would be something that could be added to @formkit/nuxt.

[justin-schroeder]

Yes! This is high on my priority list right now — specifically improving tree shaking, configuration management (defaultConfig loads lots of stuff, it can be trimmed per-use case), and nuxt module optimizations. Since I’ve already started down that road im not sure it would be a good use of your time to make a PR, but I would really like to see your implementation.

Thanks for looking into this!