<template> <DocSectionText v-bind="$attrs"> <p>ToggleSwitch 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 w-48"> <div class="flex flex-col items-center gap-2"> <ToggleSwitch name="activation" /> <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.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: { activation: false }, resolver: zodResolver( z.object({ activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' }) }) ), code: { basic: ` <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48"> <div class="flex flex-col items-center gap-2"> <ToggleSwitch name="activation" /> <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.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 w-48"> <div class="flex flex-col items-center gap-2"> <ToggleSwitch name="activation" /> <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.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: { activation: false }, resolver: zodResolver( z.object({ activation: z.boolean().refine((val) => val === true, { message: 'Activation 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 w-48"> <div class="flex flex-col items-center gap-2"> <ToggleSwitch name="activation" /> <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.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({ activation: false }); const resolver = ref(zodResolver( z.object({ activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' }) }) )); <\/script> ` } }; }, methods: { onFormSubmit({ valid }) { if (valid) { this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 }); } } } }; </script>