<template> <DocSectionText v-bind="$attrs"> <p>InputOtp integrates seamlessly with the <NuxtLink to="/forms">PrimeVue Forms</NuxtLink> library.</p> </DocSectionText> <div class="card flex justify-center"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <div class="flex flex-col gap-1"> <InputOtp name="passcode" /> <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message> </div> <Button type="submit" severity="secondary" label="Submit" /> </Form> </div> <DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" /> </template> <script> import { zodResolver } from '@primevue/forms/resolvers/zod'; import { z } from 'zod'; export default { data() { return { initialValues: { passcode: '' }, resolver: zodResolver( z.object({ passcode: z.string().min(1, { message: 'Passcode is required.' }) }) ), code: { basic: ` <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <div class="flex flex-col gap-1"> <InputOtp name="passcode" /> <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message> </div> <Button type="submit" severity="secondary" label="Submit" /> </Form> `, options: ` <template> <div class="card flex justify-center"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <div class="flex flex-col gap-1"> <InputOtp name="passcode" /> <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message> </div> <Button type="submit" severity="secondary" label="Submit" /> </Form> </div> </template> <script> import { zodResolver } from '@primevue/forms/resolvers/zod'; import { z } from 'zod'; export default { data() { return { initialValues: { passcode: '' }, resolver: zodResolver( z.object({ passcode: z.string().min(1, { message: 'Passcode is required.' }) }) ) } }, methods: { onFormSubmit({ valid }) { if (valid) { this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 }); } } } } <\/script> `, composition: ` <template> <div class="card flex justify-center"> <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4"> <div class="flex flex-col gap-1"> <InputOtp name="passcode" /> <Message v-if="$form.passcode?.invalid" severity="error" size="small" variant="simple">{{ $form.passcode.error?.message }}</Message> </div> <Button type="submit" severity="secondary" label="Submit" /> </Form> </div> </template> <script setup> import { ref } from 'vue'; import { zodResolver } from '@primevue/forms/resolvers/zod'; import { useToast } from "primevue/usetoast"; import { z } from 'zod'; const toast = useToast(); const initialValues = ref({ passcode: '' }); const resolver = ref(zodResolver( z.object({ passcode: z.string().min(1, { message: 'Passcode is required.' }) }) )); const onFormSubmit = ({ valid }) => { if (valid) { toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 }); } }; <\/script> ` } }; }, methods: { onFormSubmit({ valid }) { if (valid) { this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 }); } } } }; </script>