The simplest way to get a new project started with FormKit is by using FormKit CLI's create-app
. Alternatively, if you already have a project, you can manually install with Vue, with Nuxt or with Astro.
create-app
is the fastest way to start a new project with FormKit pre-configured for you. It walks you through all the necessary steps, and allows you to optionally add TypeScript support, use Nuxt or Vite as your starting template, or set up Pro Inputs.
At your terminal, run npx formkit create-app
to start your new project:
create-app
will ask you some questions about your project so it can determine what it needs to install and setup for you:
Once this is completed, you can follow the instructions to install all dependencies and start a development server:
Most new projects use a build tool like Vite, Snowpack, or webpack. This makes installing npm dependencies a piece of cake 🍰:
npm install @formkit/vue@next
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 3 application.
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.
First, we need to install Astro's Vue integration. You can refer to Astro's Vue integration docs for more detail.
Inside of Astro's config file (astro.config.*
), let's add an entrypoint _app
. The _app
entrypoint file is just a configuration file for Vue:
Next, install the @formKit/vue
package:
The @formkit/vue
package ships with a Vue plugin and a default configuration for easy setup:
FormKit
directly inside Astro files, so you should create a wrapper around your forms.
Now you can add FormKit to your Astro Vue components, so that you can create a component inside the components folder:
After that, you just need to import and use it inside your Astro files:
That's it! You're now ready to use the <FormKit>
component in your Astro application.
If you would like to supply your own configuration, you can either extend defaultConfig
by passing a configuration object to it, or replace with your own configuration object, which allows for improved tree-shaking (only include the rules and languages you want to actually use) and more fine-grained control:
Nuxt already automatically uses formkit.config.js
that is at the root of your project to extend FormKit's functionality.
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:
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
: