Alright, in this lesson, let's start building forms with FormKit. But first, we need to have an environment to work in. I've started by creating a brand new Nuxt project. You can do the same on your local machine by typing npx, nuxy, init, and then the name of the project.
I called mine Robust Forms Course. If you'd rather follow along with an online playground, you could use something like StackBlitz in order to do it all in your browser. new, then you're presented with this little page here, which shows you several different ways of getting started with Nuxt. By choosing the StackBlitz option here, you get the same exact project that I booted up locally, but inside of StackBlitz.
So feel free to follow along this way as well. By the way, I've decided to start the project with Nuxt, since its file structure is so minimal. And because we get a few niceties, like auto-import of the composition functions from Vue. However, if you'd like to use FormKit with a regular old Vue SPA, you could definitely do that as well.
Alright, so first things first, let's now install FormKit. I'll do npm install at formkit slash nuxt. in order to install the FormKit module. js project, you'd use AppFormKit slash Vue instead.
Once that finishes downloading, we can register the module over in our Nuxt config file. ts file in our root directory. This is how we'll configure the default options for the module. Once again, if you are working in a vanilla view project, you could provide these same global configuration options when you use the plugin with Apptite you use.
For best TypeScript support, I'll import default config options from AppFormKit slash view. Then we'll define the configuration options using the default config options type. If you're not familiar with TypeScript, don't worry about it. All this is really doing is making sure that the object that we're providing here contains the proper options and the proper types of values.
For example, if I did control spacebar, you'd see a list of all the available options. All those with underscores are meant to be private, so we'll skip over those. But all of these other things here are options that we could use to configure FormKit. The only one that I want to provide right now is the theme option.
This tells FormKit how we want our form inputs to look. And the default theme provided by FormKit is called Genesis. Lastly, I'll just export this default config. At this point, we might have to restart the next dev server in order to pick up on this config file.
And now we can start creating inputs with FormKit. We'll do that in the next lesson. Alright, in this lesson, let's start building forms with FormKit. But first, we need to have an environment to work in.
I've started by creating a brand new Nuxt project. You can do the same on your local machine by typing npx, nuxy, init, and then the name of the project. I called mine Robust Forms Course. If you'd rather follow along with an online playground, you could use something like StackBlitz in order to do it all in your browser.
new, then you're presented with this little page here, which shows you several different ways of getting started with Nuxt. By choosing the StackBlitz option here, you get the same exact project that I booted up locally, but inside of StackBlitz. So feel free to follow along this way as well. By the way, I've decided to start the project with Nuxt, since its file structure is so minimal.
And because we get a few niceties, like auto-import of the composition functions from Vue. However, if you'd like to use FormKit with a regular old Vue SPA, you could definitely do that as well. Alright, so first things first, let's now install FormKit. I'll do npm install at formkit slash nuxt.
in order to install the FormKit module. js project, you'd use AppFormKit slash Vue instead. Once that finishes downloading, we can register the module over in our Nuxt config file. ts file in our root directory.
This is how we'll configure the default options for the module. Once again, if you are working in a vanilla view project, you could provide these same global configuration options when you use the plugin with Apptite you use. For best TypeScript support, I'll import default config options from AppFormKit slash view. Then we'll define the configuration options using the default config options type.
If you're not familiar with TypeScript, don't worry about it. All this is really doing is making sure that the object that we're providing here contains the proper options and the proper types of values. For example, if I did control spacebar, you'd see a list of all the available options. All those with underscores are meant to be private, so we'll skip over those.
But all of these other things here are options that we could use to configure FormKit. The only one that I want to provide right now is the theme option. This tells FormKit how we want our form inputs to look. And the default theme provided by FormKit is called Genesis.
Lastly, I'll just export this default config. At this point, we might have to restart the next dev server in order to pick up on this config file. And now we can start creating inputs with FormKit. We'll do that in the next lesson.