Theme

Docs Navigation

Installation

FormKit can be downloaded using a package manager like npm or yarn or it can be used directly via CDN.

With Vue

Most new projects use a build tool like Vite, Snowpack, or webpack. This makes installing npm dependencies a piece of cake 🍰.

The @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.

next
You can install the upcoming version of FormKit (unstable) anytime by opting to installing the "next" version tag: npm install @formkit/vue@next
Vue 2
FormKit only supports Vue 3. If you're required to use Vue 2 on a project, consider using the spiritual ancestor of FormKit — Vue Formulate.

With Nuxt

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 <FormKit> component.

Configuring with Nuxt

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, .ts, .mjs, and .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 formkit key. 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 DefaultConfigOptions explicitly:

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 false:

That's it! FormKit is ready to use and — if you read this far — specifically tailored to your Nuxt project's needs.

Nuxt 2
FormKit only supports Nuxt 3. If you're required to use Nuxt 2 on a project, consider using the spiritual ancestor of FormKit — Vue Formulate — which also ships with its own Nuxt module.

Default theme

The default FormKit theme (called "genesis") can be added by installing the @formkit/themes package:

Assuming you are using a bundler like Vite, Webpack or Nuxt — you can then directly import the theme:

If you prefer to reference the css file on a CDN you can do so:

Using Tailwind or another utility framework? Styling docs

Starter project

If you would like to get up and running on a new project quickly to kick the tires, then consider cloning the our available FormKit Vue Starter Project on Github.