Quick Start

This guide will help you get started with Vue-Formik. It will show you how to install the library, use it in your Vue components, and create a simple form.

✨ Try Vue-Formik Online

To quickly try out Vue-Formik, you can use the online playground. It is a code editor that allows you to write Vue-Formik code and see the results in real-time.

Installation

You can install Vue-Formik using npm or yarn. Here is the command to install it using npm: 

npm i vue-formik

After installing Vue-Formik, you can import hooks or components from the library and start using them in your Vue components. No additional setup is required.

Usage

Vue-Formik provides a set of hooks and components that you can use to interact with your forms. Here is a minimal example of how you can use Vue-Formik to create a simple form with a single input field: 

<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>
Previous

Introduction

Next

useFormik