How in vuejs3 app with vee-validate/yup to show custom error message?

[PetroGromovo]

Hello, If there is a way in vuejs3 app with vee-validate and yup to show custom error message? I make select input input with placeholder:

              <Field
                name="published"
                as="select"
                class="form-control editable_field"
                v-model="formSelectionPublished">
                <option value="" disabled selected>- Select Category -</option>
                <option v-for="(categoryPublishedLabel) in categoryPublishedLabels" :key="categoryPublishedLabel.code">
                  {{categoryPublishedLabel.label}}
                </option>
              </Field>
              <ErrorMessage name="published" class="validation_error"/>

...
      const categoryEditValidationRules = Yup.object().shape({
        published: Yup.string().max(100).required().notOneOf(['- Select Category -']).label('Category published')

and it works ok, but the only thing I need to replace error message : Category published must not be one of the following values: - Select Category - I would like to show field required error message...

In package.json :

    "vee-validate": "^4.0.0-beta.18",
    "vue": "^3.0.0",
    "yup": "^0.29.3"

Thanks!

[logaretm]

Such questions belong in StackOverflow. I'm pretty active there and would answer your question as well as many others. I would like to keep Github focused on actual issues and bug reports.

Why don't you check yup docs? Most yup validators accept a second argument as a custom error message.

Yup.string().max(100).required().notOneOf(['- Select Category -'], 'Please select a category');