Skip to content

Commit 6e9687e

Browse files
stafyniaksachastafyniaksacha
committed
feat: migrate form schema to zod v4
1 parent 9fabf97 commit 6e9687e

19 files changed

Lines changed: 186 additions & 249 deletions

File tree

‎.demo/app/pages/auth/index.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup lang="ts">
2-
import { toTypedSchema } from '@vee-validate/zod'
32
import { Field, useForm } from 'vee-validate'
4-
import { z } from 'zod'
3+
import * as z from 'zod'
54
65
definePageMeta({
76
layout: 'empty',
@@ -23,22 +22,21 @@ const VALIDATION_TEXT = {
2322
2423
// This is the Zod schema for the form input
2524
// It's used to define the shape that the form data will have
26-
const zodSchema = z.object({
27-
email: z.string().email(VALIDATION_TEXT.EMAIL_REQUIRED),
25+
const validationSchema = z.object({
26+
email: z.email(VALIDATION_TEXT.EMAIL_REQUIRED),
2827
password: z.string().min(1, VALIDATION_TEXT.PASSWORD_REQUIRED),
2928
trustDevice: z.boolean(),
3029
})
3130
3231
// Zod has a great infer method that will
3332
// infer the shape of the schema into a TypeScript type
34-
type FormInput = z.infer<typeof zodSchema>
33+
type FormInput = z.infer<typeof validationSchema>
3534
36-
const validationSchema = toTypedSchema(zodSchema)
37-
const initialValues = {
35+
const initialValues: FormInput = {
3836
email: '',
3937
password: '',
4038
trustDevice: false,
41-
} satisfies FormInput
39+
}
4240
4341
const {
4442
handleSubmit,

‎.demo/app/pages/auth/login-1.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup lang="ts">
2-
import { toTypedSchema } from '@vee-validate/zod'
32
import { Field, useForm } from 'vee-validate'
4-
import { z } from 'zod'
3+
import * as z from 'zod'
54
65
definePageMeta({
76
layout: 'empty',
@@ -23,22 +22,21 @@ const VALIDATION_TEXT = {
2322
2423
// This is the Zod schema for the form input
2524
// It's used to define the shape that the form data will have
26-
const zodSchema = z.object({
27-
email: z.string().email(VALIDATION_TEXT.EMAIL_REQUIRED),
25+
const validationSchema = z.object({
26+
email: z.email(VALIDATION_TEXT.EMAIL_REQUIRED),
2827
password: z.string().min(1, VALIDATION_TEXT.PASSWORD_REQUIRED),
2928
trustDevice: z.boolean(),
3029
})
3130
3231
// Zod has a great infer method that will
3332
// infer the shape of the schema into a TypeScript type
34-
type FormInput = z.infer<typeof zodSchema>
33+
type FormInput = z.infer<typeof validationSchema>
3534
36-
const validationSchema = toTypedSchema(zodSchema)
37-
const initialValues = {
35+
const initialValues: FormInput = {
3836
email: '',
3937
password: '',
4038
trustDevice: false,
41-
} satisfies FormInput
39+
}
4240
4341
const {
4442
handleSubmit,

‎.demo/app/pages/auth/login-2.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup lang="ts">
2-
import { toTypedSchema } from '@vee-validate/zod'
32
import { Field, useForm } from 'vee-validate'
4-
import { z } from 'zod'
3+
import * as z from 'zod'
54
65
definePageMeta({
76
layout: 'empty',
@@ -23,22 +22,21 @@ const VALIDATION_TEXT = {
2322
2423
// This is the Zod schema for the form input
2524
// It's used to define the shape that the form data will have
26-
const zodSchema = z.object({
27-
email: z.string().email(VALIDATION_TEXT.EMAIL_REQUIRED),
25+
const validationSchema = z.object({
26+
email: z.email(VALIDATION_TEXT.EMAIL_REQUIRED),
2827
password: z.string().min(1, VALIDATION_TEXT.PASSWORD_REQUIRED),
2928
trustDevice: z.boolean(),
3029
})
3130
3231
// Zod has a great infer method that will
3332
// infer the shape of the schema into a TypeScript type
34-
type FormInput = z.infer<typeof zodSchema>
33+
type FormInput = z.infer<typeof validationSchema>
3534
36-
const validationSchema = toTypedSchema(zodSchema)
37-
const initialValues = {
35+
const initialValues: FormInput = {
3836
email: '',
3937
password: '',
4038
trustDevice: false,
41-
} satisfies FormInput
39+
}
4240
4341
const {
4442
handleSubmit,

‎.demo/app/pages/auth/login-3.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup lang="ts">
2-
import { toTypedSchema } from '@vee-validate/zod'
32
import { Field, useForm } from 'vee-validate'
4-
import { z } from 'zod'
3+
import * as z from 'zod'
54
65
definePageMeta({
76
layout: 'empty',
@@ -23,22 +22,21 @@ const VALIDATION_TEXT = {
2322
2423
// This is the Zod schema for the form input
2524
// It's used to define the shape that the form data will have
26-
const zodSchema = z.object({
27-
email: z.string().email(VALIDATION_TEXT.EMAIL_REQUIRED),
25+
const validationSchema = z.object({
26+
email: z.email(VALIDATION_TEXT.EMAIL_REQUIRED),
2827
password: z.string().min(1, VALIDATION_TEXT.PASSWORD_REQUIRED),
2928
trustDevice: z.boolean(),
3029
})
3130
3231
// Zod has a great infer method that will
3332
// infer the shape of the schema into a TypeScript type
34-
type FormInput = z.infer<typeof zodSchema>
33+
type FormInput = z.infer<typeof validationSchema>
3534
36-
const validationSchema = toTypedSchema(zodSchema)
37-
const initialValues = {
35+
const initialValues: FormInput = {
3836
email: '',
3937
password: '',
4038
trustDevice: false,
41-
} satisfies FormInput
39+
}
4240
4341
const {
4442
handleSubmit,

‎.demo/app/pages/auth/recover.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup lang="ts">
2-
import { toTypedSchema } from '@vee-validate/zod'
32
import { Field, useForm } from 'vee-validate'
4-
import { z } from 'zod'
3+
import * as z from 'zod'
54
65
definePageMeta({
76
layout: 'empty',
@@ -22,18 +21,17 @@ const VALIDATION_TEXT = {
2221
2322
// This is the Zod schema for the form input
2423
// It's used to define the shape that the form data will have
25-
const zodSchema = z.object({
26-
email: z.string().email(VALIDATION_TEXT.EMAIL_REQUIRED),
24+
const validationSchema = z.object({
25+
email: z.email(VALIDATION_TEXT.EMAIL_REQUIRED),
2726
})
2827
2928
// Zod has a great infer method that will
3029
// infer the shape of the schema into a TypeScript type
31-
type FormInput = z.infer<typeof zodSchema>
30+
type FormInput = z.infer<typeof validationSchema>
3231
33-
const validationSchema = toTypedSchema(zodSchema)
34-
const initialValues = {
32+
const initialValues: FormInput = {
3533
email: '',
36-
} satisfies FormInput
34+
}
3735
3836
const { handleSubmit, isSubmitting } = useForm({
3937
validationSchema,

‎.demo/app/pages/auth/signup-1.vue‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<script setup lang="ts">
22
import type { AddonInputPassword } from '#components'
3-
import { toTypedSchema } from '@vee-validate/zod'
43
import { Field, useForm } from 'vee-validate'
54
6-
import { z } from 'zod'
5+
import * as z from 'zod'
76
87
definePageMeta({
98
layout: 'empty',
@@ -30,10 +29,10 @@ const VALIDATION_TEXT = {
3029
3130
// This is the Zod schema for the form input
3231
// It's used to define the shape that the form data will have
33-
const zodSchema = z
32+
const validationSchema = z
3433
.object({
3534
username: z.string().min(3, VALIDATION_TEXT.USERNAME_LENGTH),
36-
email: z.string().email(VALIDATION_TEXT.EMAIL_REQUIRED),
35+
email: z.email(VALIDATION_TEXT.EMAIL_REQUIRED),
3736
password: z.string().min(8, VALIDATION_TEXT.PASSWORD_LENGTH),
3837
confirmPassword: z.string(),
3938
})
@@ -42,14 +41,14 @@ const zodSchema = z
4241
// before the form is submitted
4342
if (passwordRef.value?.validation?.feedback?.warning || passwordRef.value?.validation?.feedback?.suggestions?.length) {
4443
ctx.addIssue({
45-
code: z.ZodIssueCode.custom,
44+
code: 'custom',
4645
message: passwordRef.value?.validation?.feedback?.warning || passwordRef.value.validation.feedback?.suggestions?.[0],
4746
path: ['password'],
4847
})
4948
}
5049
if (data.password !== data.confirmPassword) {
5150
ctx.addIssue({
52-
code: z.ZodIssueCode.custom,
51+
code: 'custom',
5352
message: VALIDATION_TEXT.PASSWORD_MATCH,
5453
path: ['confirmPassword'],
5554
})
@@ -58,15 +57,14 @@ const zodSchema = z
5857
5958
// Zod has a great infer method that will
6059
// infer the shape of the schema into a TypeScript type
61-
type FormInput = z.infer<typeof zodSchema>
60+
type FormInput = z.infer<typeof validationSchema>
6261
63-
const validationSchema = toTypedSchema(zodSchema)
64-
const initialValues = {
62+
const initialValues: FormInput = {
6563
username: 'maya',
6664
email: '',
6765
password: '',
6866
confirmPassword: '',
69-
} satisfies FormInput
67+
}
7068
7169
const { values, handleSubmit, isSubmitting, setFieldError } = useForm({
7270
validationSchema,

‎.demo/app/pages/auth/signup-2.vue‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<script setup lang="ts">
22
import type { AddonInputPassword } from '#components'
3-
import { toTypedSchema } from '@vee-validate/zod'
43
import { Field, useForm } from 'vee-validate'
54
6-
import { z } from 'zod'
5+
import * as z from 'zod'
76
87
definePageMeta({
98
layout: 'empty',
@@ -30,9 +29,9 @@ const passwordRef = ref<InstanceType<typeof AddonInputPassword>>()
3029
3130
// This is the Zod schema for the form input
3231
// It's used to define the shape that the form data will have
33-
const zodSchema = z
32+
const validationSchema = z
3433
.object({
35-
email: z.string().email(VALIDATION_TEXT.EMAIL_REQUIRED),
34+
email: z.email(VALIDATION_TEXT.EMAIL_REQUIRED),
3635
password: z.string().min(8, VALIDATION_TEXT.PASSWORD_LENGTH),
3736
confirmPassword: z.string(),
3837
terms: z.boolean(),
@@ -42,21 +41,21 @@ const zodSchema = z
4241
// before the form is submitted
4342
if (passwordRef.value?.validation?.feedback?.warning || passwordRef.value?.validation?.feedback?.suggestions?.length) {
4443
ctx.addIssue({
45-
code: z.ZodIssueCode.custom,
44+
code: 'custom',
4645
message: passwordRef.value?.validation?.feedback?.warning || passwordRef.value.validation.feedback?.suggestions?.[0],
4746
path: ['password'],
4847
})
4948
}
5049
if (data.password !== data.confirmPassword) {
5150
ctx.addIssue({
52-
code: z.ZodIssueCode.custom,
51+
code: 'custom',
5352
message: VALIDATION_TEXT.PASSWORD_MATCH,
5453
path: ['confirmPassword'],
5554
})
5655
}
5756
if (!data.terms) {
5857
ctx.addIssue({
59-
code: z.ZodIssueCode.custom,
58+
code: 'custom',
6059
message: VALIDATION_TEXT.TERMS_REQUIRED,
6160
path: ['terms'],
6261
})
@@ -65,15 +64,14 @@ const zodSchema = z
6564
6665
// Zod has a great infer method that will
6766
// infer the shape of the schema into a TypeScript type
68-
type FormInput = z.infer<typeof zodSchema>
67+
type FormInput = z.infer<typeof validationSchema>
6968
70-
const validationSchema = toTypedSchema(zodSchema)
71-
const initialValues = {
69+
const initialValues: FormInput = {
7270
email: '',
7371
password: '',
7472
confirmPassword: '',
7573
terms: false,
76-
} satisfies FormInput
74+
}
7775
7876
const { values, handleSubmit, isSubmitting } = useForm({
7977
validationSchema,

‎.demo/app/pages/auth/signup-3.vue‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<script setup lang="ts">
22
import type { AddonInputPassword } from '#components'
3-
import { toTypedSchema } from '@vee-validate/zod'
43
import { Field, useForm } from 'vee-validate'
54
6-
import { z } from 'zod'
5+
import * as z from 'zod'
76
87
definePageMeta({
98
layout: 'empty',
@@ -29,9 +28,9 @@ const passwordRef = ref<InstanceType<typeof AddonInputPassword>>()
2928
3029
// This is the Zod schema for the form input
3130
// It's used to define the shape that the form data will have
32-
const zodSchema = z
31+
const validationSchema = z
3332
.object({
34-
email: z.string().email(VALIDATION_TEXT.EMAIL_REQUIRED),
33+
email: z.email(VALIDATION_TEXT.EMAIL_REQUIRED),
3534
password: z.string().min(8, VALIDATION_TEXT.PASSWORD_LENGTH),
3635
confirmPassword: z.string(),
3736
})
@@ -40,14 +39,14 @@ const zodSchema = z
4039
// before the form is submitted
4140
if (passwordRef.value?.validation?.feedback?.warning || passwordRef.value?.validation?.feedback?.suggestions?.length) {
4241
ctx.addIssue({
43-
code: z.ZodIssueCode.custom,
42+
code: 'custom',
4443
message: passwordRef.value?.validation?.feedback?.warning || passwordRef.value.validation.feedback?.suggestions?.[0],
4544
path: ['password'],
4645
})
4746
}
4847
if (data.password !== data.confirmPassword) {
4948
ctx.addIssue({
50-
code: z.ZodIssueCode.custom,
49+
code: 'custom',
5150
message: VALIDATION_TEXT.PASSWORD_MATCH,
5251
path: ['confirmPassword'],
5352
})
@@ -56,14 +55,13 @@ const zodSchema = z
5655
5756
// Zod has a great infer method that will
5857
// infer the shape of the schema into a TypeScript type
59-
type FormInput = z.infer<typeof zodSchema>
58+
type FormInput = z.infer<typeof validationSchema>
6059
61-
const validationSchema = toTypedSchema(zodSchema)
62-
const initialValues = {
60+
const initialValues: FormInput = {
6361
email: '',
6462
password: '',
6563
confirmPassword: '',
66-
} satisfies FormInput
64+
}
6765
6866
const { values, handleSubmit, isSubmitting } = useForm({
6967
validationSchema,

0 commit comments

Comments
 (0)