Form piwx2 ⚡️ - Validate your nuxt with zod schema 🪿

Join with my pound with the 1st Library released Documentation 🐣

Install for nuxt3

npm i @jeng3zeus/form-piw-piw

// nuxt.config.ts
{
  modules: ['@jeng3zeus/form-piw-piw']
}

Features

• Form to validate child element
• Validate data with Zod
• Use Vue reactive for form data
• Validate with custom input using Vue provide
• Having a feature trigger with on blur validate (No focus)
• 🆕 Cool scroll

Example

script

<script>
import { z } from '#jengzeus/zod';

const schema = z.object({
    username: z.string().min(1, { message: 'กรุณากรอกชื่อของคุณ' })
});

const formData = reactive({
  username: ''
});
</script>

template

<JForm
    v-slot="{ errors }"
    name="login"
    :form="formData"
    :schema="schema"
    @submit="handleSubmit"
    @reset="handleReset"
>
    <input 
        v-model="formData.username"
        name="username" 
        placeholder="username"
    />
    <p style="color: red;">{{ errors.username }}</p>
</JForm>