docs: added valibot examples

Author: logaretm

docs/package.json

@@ -30,6 +30,7 @@
     "shiki": "^0.14.3",
     "tailwindcss": "^3.3.3",
     "unist-util-visit": "^5.0.0",
+    "valibot": "^0.7.0",
     "vee-validate": "^4.11.0",
     "vue": "^3.3.0",
     "yup": "^1.2.0",

docs/src/components/Repl.vue

@@ -20,7 +20,7 @@ const files = await Promise.all(
     const code = await import(`./examples/${componentName}.vue?raw`);
 
     return [filename, code.default];
-  })
+  }),
 );
 
 const store = new ReplStore({
@@ -33,13 +33,15 @@ store.setImportMap({
     'vee-validate': 'https://unpkg.com/vee-validate@latest/dist/vee-validate.esm.js',
     '@vee-validate/zod': 'https://unpkg.com/@vee-validate/zod@latest/dist/vee-validate-zod.esm.js',
     '@vee-validate/yup': 'https://unpkg.com/@vee-validate/yup@latest/dist/vee-validate-yup.esm.js',
+    '@vee-validate/valibot': 'https://unpkg.com/@vee-validate/valibot@latest/dist/vee-validate-valibot.esm.js',
     '@vee-validate/i18n': 'https://unpkg.com/@vee-validate/i18n@latest/dist/vee-validate-i18n.esm.js',
     '@vee-validate/rules': 'https://unpkg.com/@vee-validate/rules@latest/dist/vee-validate-rules.esm.js',
     'property-expr': 'https://esm-repo.netlify.app/property-expr.esm.js',
     'tiny-case': 'https://esm-repo.netlify.app/tiny-case.esm.js',
     toposort: 'https://esm-repo.netlify.app/topsort.esm.js',
     yup: 'https://unpkg.com/[email protected]/index.esm.js',
     zod: 'https://unpkg.com/[email protected]/lib/index.mjs',
+    valibot: 'https://unpkg.com/browse/[email protected]/dist/index.js',
     '@vue/devtools-api': 'https://unpkg.com/@vue/[email protected]/lib/esm/index.js',
     vue: `https://unpkg.com/vue@${version}/dist/vue.esm-browser.prod.js`,
   },
@@ -49,11 +51,14 @@ store.setImportMap({
 store.setVueVersion(version);
 
 function onForkClick() {
-  const exampleFiles = files.reduce((acc, file) => {
-    acc[file[0]] = file[1];
-
-    return acc;
-  }, {} as Record<string, string>);
+  const exampleFiles = files.reduce(
+    (acc, file) => {
+      acc[file[0]] = file[1];
+
+      return acc;
+    },
+    {} as Record<string, string>,
+  );
 
   StackBlitzSdk.openProject(getViteProjectConfig(exampleFiles), {
     newWindow: true,

docs/src/components/examples/CompositionValibotBasic.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { useForm } from 'vee-validate';
+import { toTypedSchema } from '@vee-validate/valibot';
+import { email, string, minLength, object } from 'valibot';
+
+const { errors, defineInputBinds } = useForm({
+  validationSchema: toTypedSchema(
+    object({
+      email: string([minLength(1, 'Email is required'), email()]),
+      password: string([minLength(6, 'password too short')]),
+    }),
+  ),
+});
+
+const emailField = defineInputBinds('email');
+const passwordField = defineInputBinds('password');
+</script>
+
+<template>
+  <input v-bind="emailField" />
+  <div>{{ errors.email }}</div>
+
+  <input v-bind="passwordField" />
+  <div>{{ errors.password }}</div>
+</template>

docs/src/pages/guide/composition-api/getting-started.mdx

@@ -280,13 +280,51 @@ There is a known issue with Zod's `refine` and `superRefine` not executing whene
 
 </DocTip>
 
-### Validating with global validators
+### Validating with Valibot
+
+You can also use [Valibot](https://valibot.dev/) which is is a schema library with bundle size, type safety and developer experience in mind. It is a great alternative to Yup and Zod if bundle size is a concern. You will need to use the `@vee-validate/valibot` package to use valibot schemas.
+
+```sh
+# with npm
+npm i @vee-validate/valibot
+# with pnpm
+pnpm add @vee-validate/valibot
+# with yarn
+yarn add @vee-validate/valibot
+```
+
+Then you can wrap your Valibot schemas with `toTypedSchema` function which allows vee-validate to infer form input and output types. [More on that here](/guide/composition-api/typed-schema).
+
+```ts
+import { useForm } from 'vee-validate';
+import { string, object, email, minLength } from 'valibot';
+import { toTypedSchema } from '@vee-validate/valibot';
+
+// Creates a typed schema for vee-validate
+const schema = toTypedSchema(
+  object({
+    email: string([minLength(1, 'required'), email()]),
+  }),
+);
+
+const { errors, values } = useForm({
+  validationSchema: schema,
+});
+```
+
+Here is a full example using valibot with `useForm`:
+
+<Repl files={{ 'App.vue': 'CompositionValibotBasic' }} client:only />
+
+### Other validation providers and options
+
+#### Global Rules
 
 Another option is using `@vee-validate/rules` which have been historically bundled with past versions of vee-validate. It includes rules that can be defined globally and then used anywhere using Laravel-like string expressions.
 
 You can refer to the full guide on global rules [here](/guide/global-validators).
 
-### Validating with functions
+#### Validating with functions
 
 Another option is to just use any 3rd party validation tool you prefer, something like [`validator.js`](https://github.com/validatorjs/validator.js/). Here is a quick example:
 

docs/src/pages/guide/composition-api/typed-schema.mdx

@@ -12,9 +12,8 @@ next:
 ---
 
 import DocTip from '@/components/DocTip.vue';
-import DocBadge from '@/components/DocBadge.vue';
 
-# Typed Schemas <DocBadge title="v4.8" />
+# Typed Schemas
 
 <DocTip type="warn">
 
@@ -114,7 +113,7 @@ const { values, handleSubmit } = useForm({
       email: string().required(),
       password: string().required(),
       name: string(),
-    })
+    }),
   ),
 });
 
@@ -146,7 +145,7 @@ const { values, handleSubmit } = useForm({
       email: string().required().default('[email protected]'),
       password: string().required().default(''),
       name: string().default(''),
-    })
+    }),
   ),
 });
 ```
@@ -168,12 +167,12 @@ const { values, handleSubmit } = useForm({
       age: number()
         .transform(val => Number(val))
         .required(),
-    })
+    }),
   ),
 });
 ```
 
-But note that this does not change the input or output types of the casted fields. The cast will only occur when setting the initial value and when the values are submitted.
+But note that this does not change the input or output types of the casted fields. The cast will only occur when setting the initial value and when the values are submitted in the submission handler.
 
 ## Zod
 
@@ -209,7 +208,7 @@ const { values, handleSubmit } = useForm({
       email: string().min(1, 'required'),
       password: string().min(1, 'required'),
       name: string().optional(),
-    })
+    }),
   ),
 });
 
@@ -246,7 +245,7 @@ const { values, handleSubmit } = useForm({
     object({
       email: string().default('[email protected]'),
       password: string().default(''),
-    })
+    }),
   ),
 });
 ```
@@ -266,7 +265,7 @@ const { values, handleSubmit } = useForm({
   validationSchema: toTypedSchema(
     object({
       age: preprocess(val => Number(val), number()),
-    })
+    }),
   ),
 });
 
@@ -278,3 +277,92 @@ handleSubmit(submitted => {
   values.age;
 });
 ```
+
+## Valibot
+
+[Valibot](https://valibot.dev/) is a schema library with bundle size, type safety and developer experience in mind. It is a great alternative to Yup and Zod if bundle size is a concern.
+
+You can use valibot as a typed schema with the `@vee-validate/valibot` package:
+
+```sh
+# npm
+npm install @vee-validate/valibot
+# yarn
+yarn add @vee-validate/valibot
+# pnpm
+pnpm add @vee-validate/valibot
+```
+
+The `@vee-valdiate/valibot` package exposes a `toTypedSchema` function that accepts any valibot schema. Which then you can pass along to `validationSchema` option on `useForm`.
+
+This makes the form values and submitted values typed automatically and caters for both input and output types of that schema.
+
+```ts
+import { useForm } from 'vee-validate';
+import { object, string, minLength } from 'valibot';
+import { toTypedSchema } from '@vee-validate/valibot';
+
+const { values, handleSubmit } = useForm({
+  validationSchema: toTypedSchema(
+    object({
+      email: string([minLength(1, 'required')]),
+      password: string([minLength(1, 'required')]),
+      name: string(),
+    }),
+  ),
+});
+
+// ❌ Type error, which means `values` is type-safe
+values.email.endsWith('@gmail.com');
+
+handleSubmit(submitted => {
+  // No errors, because email is required!
+  submitted.email.endsWith('@gmail.com');
+
+  // ❌ Type error, because `name` is not required so it could be undefined
+  // Means that your fields are now type safe!
+  submitted.name.length;
+});
+```
+
+### Valibot default values
+
+You can also define default values on your schema directly and it will be picked up by the form:
+
+```ts
+import { useForm } from 'vee-validate';
+import { object, string, useDefault, minLength } from 'valibot';
+import { toTypedSchema } from '@vee-validate/valibot';
+
+const { values, handleSubmit } = useForm({
+  validationSchema: toTypedSchema(
+    object({
+      email: useDefault(string([minLength(1, 'required')]), '[email protected]'),
+      password: useDefault(string([minLength(1, 'required')]), ''),
+      name: useDefault(string(), ''),
+    }),
+  ),
+});
+```
+
+Your initial values will be using the schema defaults, and also the defaults will be used if the values submitted is missing these fields.
+
+### Valibot transforms
+
+You can also define transforms to cast your fields before submission:
+
+```ts
+import { useForm } from 'vee-validate';
+import { object, number, coerce, any } from 'valibot';
+import { toTypedSchema } from '@vee-validate/valibot';
+
+const { values, handleSubmit } = useForm({
+  validationSchema: toTypedSchema(
+    object({
+      age: coerce(any(), arg => Number(arg)),
+    }),
+  ),
+});
+```
+
+But note that this does not change the input or output types of the casted fields. The cast will only occur when setting the initial value and when the values are submitted in the submission handler.