Introduction

🤔 What is Vue Formik?

Vue Formik is a powerful library for Vue.js that simplifies form handling by providing a more structured approach to managing HTML forms. Inspired by the popular React library Formik, Vue Formik leverages Vue's built-in reactivity system to streamline form development and management. 💡

📋 Minimal Example:

<template>
  <form @submit="handleSubmit">
    <input
      name="name"
      placeholder="Name"
      :value="values.name"
      @input="handleFieldChange"
    />
    <button type="submit">Submit</button>
  </form>
</template>
<script setup lang="ts">
import {useFormik} from 'vue-formik'
const {
  values,
  handleFieldChange,
  handleSubmit,
} = useFormik({
  initialValues: {
    name: ''
  },
  onSubmit: (values) => {
    alert(JSON.stringify(values, null, 2))
    // { "name": "John Doe" }
  }
})
</script>

The example above demonstrates how you can use Vue Formik to create a simple form with a single input field. At the core of Vue Formik is the useFormik function, which provides all the tools and properties you need to interact with and manage your forms effectively. 🔧