Goals

• Define form validation rules with Zod
• Use rules to provide real-time validation with FormKit
• Use the same rules to provide server-side validation for an API endpoint

Prerequisites

• Clone Boilerplate Code - https://github.com/Frontend-Nation/vue-exercise-daniel-kelly
• Basic Knowledge of Nuxt 3 API server API endpoints
• Basic knowledge of Vue
• Some experience with FormKit and zod is helpful but isn’t required

Steps

1. Setup Rules Using Zod

In /validators.ts, use Zod to provide the following rules for the existing registerValidator

1. email - should be a string, that’s a valid email address and doesn’t already exist.

   <aside> 💡 HINT: There is an API endpoint available at /api/user-exists for checking if an existing user is already registered.

   You can make a request to it like so: $fetch(/api/user-exists?email=${email})

   </aside>

2. password - should be a string of at least 6 characters

3. age - should be a positive number that is at least 18. It should also coerce any value that isn’t a number already

<aside> 💡 Resources: You can read more about creating these rules in the zod documentation

</aside>

2. Use Zod Rules to Validate the Form on the Client

In app.vue use the registerValidator to provide validation for the FormKit form

<aside> 💡 Resources: You can read more about applying zod to FormKit validations here.

</aside>

<aside> 📓

Note: We have provided a slightly revised version of the Zod FormKit plugin to give it support for the async rule for checking that the user exists. (It’s already imported in app.vue for you.

</aside>