Vue3 Vee Validate Import Custom Global Rules Issue

[erdemgonul]

Hi folks,

I want to define some rules in a seperate js file using defineRule in new vee validate. I imported that file into main.js but my sub components cant recognize those rules.

I added that line to 'main.js'
import "./validations/validation";

This is my validation.js

import { defineRule } from "vee-validate";
defineRule("required", (value) => {
  if (!value || !value.length) {
    return "This field is required";
  }

  return true;
});

Sample component for test purposes

<Form v-slot="{ errors }">
    <Field name="field" class="bg-gray-300 text-white" :rules="required" />

    <span>{{ errors.field }}</span>
  </Form>

This is the warning that i get
[Vue warn]: Property "required" was accessed during render but is not defined on instance.

Do you have any idea about solving that problem?

[logaretm]

You have bound the rules prop to non-existing required property which is a common mistake, you need to pass required as a string

So either:

<Field name="field" class="bg-gray-300 text-white" rules="required" />

or This:

<Field name="field" class="bg-gray-300 text-white" :rules="'required'" />

[erdemgonul]

Thank you for your help, and appreciated for that project.

[9mm]

@logaretm i see how it mentions putting them in main.js... is there any way to include these any other way? is there a reason it cant just be a reactive object like normal? App load time is extremely important to my app so im concerned about importing the subset i need into main.js

[logaretm]

You can import them whenever you need them. You just need to register them before any component is rendered or it will crash.

Alternatively use yup or zod which is always imported when you need them.

[Ivan-Crudo]

@logaretm I am struggling a bit using this syntax in an external library where i save my global rules, i am exporting them as function without the defineRule but i don't think that's they right way of using them.
Do you have any advice on why i cannot use the "string" syntax in another project with the dependency installed?

[logaretm]

Could be because your library is bundling them in, so you end up with two vee-validate installations.

You should add both vee-validate and @vee-validate/rules to your externals in rollup config or webpack or whatever you are using to bundle your library. You can also use defineRule then and it should work. If not, feel free to create a new Q&A with a mono-repo link so I can take a look.