How to use correctly vee-validate rules in nuxt project?

[svk-man]

I've installed the packages

npm install @vee-validate/nuxt @vee-validate/rules

"@vee-validate/nuxt": "^4.13.2",
"@vee-validate/rules": "^4.13.2",

Then I added a module to my modules config in nuxt.config.ts:

export default defineNuxtConfig({
  // ...
  modules: [
    //...
    '@vee-validate/nuxt',
  ],
});

Then I created a file plugins/vee-validate.ts and added the following lines to it:

import { defineRule } from 'vee-validate'
import { required, alpha_spaces } from '@vee-validate/rules'

export default defineNuxtPlugin(() => {
  return {
    provide: {
      VeeValidate: {
        defineRule,
        rules: {
          required,
          alpha_spaces,
        },
      },
    },
  }
})

In my component, I use the rules as follows:

const { $VeeValidate } = useNuxtApp()
const { defineRule } = $VeeValidate
const { required, alpha_spaces } = $VeeValidate.rules

defineRule('required', (value: string) => {
  if (!required(value)) return 'This field must be filled in'

  return true
})

This way works for me. But the question... Is this correct or is there a better way?

I wish it was described in the documentation.

Thank you very much!

[amirrezamini]

This is the correct approach that I'm also using.

import { defineRule } from "vee-validate";
import { required, alpha_spaces } from "@vee-validate/rules";

export default defineNuxtPlugin(() => {
  defineRule("required", required);
  /*
  defineRule('required', (value: string) => {
    if (!value || !value.length) return 'This field must be filled in'

    return true
  })
  */
  defineRule("alpha_spaces", alpha_spaces);
});

Now in your component, you can use the rules like so:

useForm({ validationSchema: {
  name: "required",
} });