unplugin-formkit

This is an unplugin (Vite, Rollup, Webpack, and esbuild) build tool for injecting FormKit into your Vue 3 application.

Note: This plugin is still still experimental and may change in the future.

What is it?

This plugin eliminates the need to register the global formkit plugin. Instead, it will automatically inject FormKit into your Vue 3 application at the point of use.

By default it will attempt to load a formkit.config.{ts,js,mjs} file in the root of your project.

1<script setup>
2import { FormKit } from '@formkit/vue'
3</script>
4
5<template>
6  <FormKit type="form">
7    <ForKit
8      type="text"
9      name="username"
10    />
11    <ForKit
12      type="password"
13      name="password"
14    />
15  </FormKit>
16</template>

Into the (conceptually) following:

1<script setup>
2import { FormKit, FormKitConfigProvider } from '@formkit/vue'
3</script>
4
5<template>
6  <Suspense>
7    <FormKitConfigProvider :config="./formkit.config.ts">
8      <FormKit type="form">
9        <ForKit
10          type="text"
11          name="username"
12        />
13        <ForKit
14          type="password"
15          name="password"
16        />
17      </FormKit>
18    </FormKit>
19  </Suspense>
20</template>

[!NOTE] The <Suspense> boundary and configuration loader is only injected if not already in the component tree. These runtime determinations are part of the <FormKitLazyProvider> component, not this plugin.

Installation

1npm install unplugin-formkit --save-dev

Then add it to your vite.config.ts (or rollup.config.ts or webpack config etc).

1import { defineConfig } from 'vite'
2import vue from '@vitejs/plugin-vue'
3import formkit from 'unplugin-formkit/vite'
4
5export default defineConfig({
6  plugins: [
7    formkit({ /* options */ }),
8    vue(),
9  ]
10})

Important: Order matters — this plugin should always be placed before the Vue plugin.

Usage

Once installed, you can use FormKit in your Vue components without any further configuration — FormKit’s configuration will automatically be injected into your application at the point of use.

[!WARNING]
Because a global plugin is not installed, you will not be able to use the this.$formkit API when using options API components.

To add some FormKit configuration to your project, simply create a formkit.config.ts (or .js or .mjs) file in the root of your project (adjacent to your vite.config.ts file) and export a configuration object:

1import { DefaultConfigOptions, createInput } from '@formkit/vue';
2
3export default {
4  inputs: {
5    custom: createInput([
6      {
7        $el: 'h1',
8        children: 'Super Custom Input!',
9      },
10    ]),
11  },
12} satisfies DefaultConfigOptions