best-practices.md

title	description	order
Best Practices	Tips and best practices to improve your workflow with vee-validate	3

Best Practices

Yup Bundle Size

vee-validate's entire core size is very small, but the same can't be said about the validators you import. Most examples use the following snippet to import everything yup has to offer:

import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().email(),
  // ...
});

You should leverage your bundler's tree-shaking capabilities and only import what you need:

import { object, string } from 'yup';

const schema = object({
  email: string().email(),
  // ...
});

This will keep your app bundle size and routes to a minimum, ensuring faster load and interaction experiences for your users.

Yup schemas in data

In most examples, you probably noticed something like this:

{
  data() {
    const schema = yup.object({
      email: yup.string().required().email(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
}

This is fine for most cases, but the way Vue makes data items reactive is by recursively traveling the object tree and marking each object as reactive, this is an unnecessary overhead as you don't really need yup schemas to be reactive.

Instead you could either use setup instead of your data or markRaw to prevent Vue from marking the yup schemas as reactive which eliminates the deep reactive conversion overhead.

{
  setup() {
    // Non-reactive because it was not explicitly defined with `reactive` or `ref`
    const schema = yup.object({
      email: yup.string().required().email(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
}

import { markRaw } from 'vue';

{
  data() {
    // Non-reactive because it was explicitly defined with `markRaw`
    const schema = markRaw(yup.object({
      email: yup.string().required().email(),
      password: yup.string().required().min(8),
    }));

    return {
      schema,
    };
  },
}

The performance implications for this might be negligible for most cases, however, for large form schemas, this can be helpful to avoid the default behavior of deep reactive conversion.