FormKit can be downloaded using a package manager like
yarn or it can be used directly via CDN.
Most new projects use a build tool like Vite, Snowpack, or webpack. This makes installing npm dependencies a piece of cake 🍰.
@formkit/vue package ships with a Vue plugin and a default configuration for easy setup.
That's it! You're now ready to use the
<FormKit> component in your Vue application. The
defaultConfig includes all of FormKit's inputs, validation rules, and the English language. You can replace the
defaultConfig with your own configuration, which allows for improved tree-shaking (only include the rules and languages you want to actually use) and more fine-grained control.
npm install @formkit/vue@next
Using FormKit with Nuxt requires minimal setup. First include the Nuxt module as a dependency within your project:
Then in your
nuxt.config file add the module to your modules list:
That's it! FormKit is now registered in your project using the default config and you can start using the
If you would like to supply your own configuration, create a
formkit.config file adjacent to your
nuxt.config file. Like the
nuxt.config file itself,
.js are all valid file extensions depending on your project's needs:
This configuration file will be automatically included if detected in your project directory. If you would like to supply a custom
path to your
formkit.config, you can override the default location using the
configFile option under the
Any path you supply should be relative to the root of your Nuxt project.
For TypeScript users, it can be helpful to type your
formkit.config.ts export as
By default, your configuration will extend the
defaultConfig that ships with FormKit. This is the desired behavior
for the majority of projects. However, if you need to define the entire FormKit config yourself — from scratch — you may do so
by setting the
defaultConfig option for the module to
That's it! FormKit is ready to use and — if you read this far — specifically tailored to your Nuxt project's needs.
The default FormKit theme (called "genesis") can be added via CDN or by installing the
genesis via CDN, supply it to the
theme property of your
Assuming you are using a bundler like Vite, Webpack or Nuxt — you can then directly import the theme: