_FormKit in Nuxt 3 Activity

Getting Started - Setup

First, you'll want to initiate a new nuxt 3 project

• go to terminal > enter npx nuxi init formkit_sample
• in terminal: cd into your project cd formkit_sample/
• in terminal: do an npm install npm i
• in terminal: deploy on local host to make sure it's all working! npm run dev

Next, install the _FormKit module

• in terminal: enter npm install @formkit/nuxt

• in nuxt.config.ts:

  import { defineNuxtConfig } from 'nuxt3'
  
  export default defineNuxtConfig({
  
  modules: ['@formkit/nuxt'],
  })
  
  

• That's it for the setup, you are ready to rock! [Actually not so fast]

• We will add tailwind and/or FormKit Themes so that our forms can be beautiful and user-friendly

_FormKit Themes

• in terminal: enter npm install @formkit/themes
• in which ever page you are using the form add this in between some <script> tags:

<script setup>
import '@formkit/themes/genesis'
</script>

• To see more styling options check out FormKit Styling

Tailwind install

• in terminal: enter npm install --save-dev @nuxtjs/tailwindcss

• in nuxt.config.ts:

  import { defineNuxtConfig } from 'nuxt3'
  
  export default defineNuxtConfig({
  
  modules: ['@formkit/nuxt',
  '@nuxtjs/tailwindcss'],
  
  })
  
  

• Finally, in terminal: enter npx tailwindcss init --full

---

How to use

FormKit Examples

• Inside of the app.vue or an index.vue page add this code to have a ready-to-use form or look through the documentation for _FormKit to see what else you can do.

<script setup>
import { ref } from "vue";
const submitted = ref(false);
const formData = ref({});
const submitHandler = async () => {
  // Let's pretend this is an ajax request:
  await new Promise((r) => setTimeout(r, 1000));
  submitted.value = true;
};
</script>

<template>
  <div class="flex justify-center">
    <!-- Beginning of Form -->
    <FormKit
      type="form"
      v-model="formData"
      :form-class="submitted ? 'hide' : 'show'"
      submit-label="Submit"
      @submit="submitHandler"
      submit-label-class="bg-grey-700 text-white"
    >
      <h1 class="text-4xl font-semibold">Get in touch!</h1>
      <p>
        If you are interested or have any questions, email me or fill out the
        form below and I’ll get back to you within 48 hours..
      </p>
      <hr class="pb-10" />
      <!-- Name -->
      <FormKit
        type="text"
        name="name"
        label="Full Name"
        placeholder="Jane Doe"
        help="What do people call you?"
        validation="required"
        outer-class="mb-5"
        label-class="block mb-1 font-bold text-sm"
        inner-class="max-w-md border border-gray-400 rounded-lg mb-1 overflow-hidden focus-within:border-blue-500"
        input-class="w-full h-10 px-3 border-none text-base text-gray-700 placeholder-gray-400"
        help-class="text-xs text-gray-500"
      />
      <!-- Email -->
      <FormKit
        type="text"
        name="email"
        label="Your email"
        placeholder="[email protected]"
        help="What email should we use?"
        validation="required|email"
        :classes="{
          outer: 'mb-5',
          label: 'block mb-1 font-bold text-sm',
          inner:
            'max-w-md border border-gray-400 rounded-lg mb-1 overflow-hidden focus-within:border-blue-500',
          input:
            'w-full h-10 px-3 border-none text-base text-gray-700 placeholder-gray-400',
          help: 'text-xs text-gray-500',
        }"
      />
      <!-- Textarea -->
      <FormKit
        type="textarea"
        name="text"
        label="Message"
        validation="required"
        placeholder="What can I do for you"
        help="A short message letting me know what you are looking for"
        :classes="{
          outer: 'mb-5',
          inner:
            'max-w-md h-24 border border-gray-400 rounded-lg mb-1 overflow-hidden focus-within:border-blue-500',
          input:
            'w-full h-24 px-3 border-none text-base text-gray-700 placeholder-gray-400',
          label: 'block mb-1 font-bold text-sm',
          help: 'text-xs text-gray-500',
        }"
      />
    </FormKit>
  </div>
  <div class="flex justify-center gap-y-14" v-if="submitted">
    <h2>Submission successful!</h2>
  </div>
  <pre class="text-center" wrap>{{ formData }}</pre>
</template>