How to set up slot correctly on VeeValidate4

Question

I am rewriting a bunch of components from VeeValidate 3 to VeeValidate4 and I am facing some issue when it comes to add use slots to render complex HTML.

This is my code:

<template>
<div>
    <Field
      :name="$t('form.email')"
      tag="div"
      :rules="`required|email`"
      class="form-input"
      v-slot='{ field, blur, updateInput }'
    >
      <label
        class="form-input-label"
      >
        <small
          class="form-input-title d-block"
          v-t="'form.email'"
        />

        <input
          type="text"
          class="form-input-field d-block"
          v-bind="field"
          :disabled="isDisabled"
          @input="updateInput"
          @blur="blur"
        >

        <p class="form-input-error" />
      </label>
    </Field>
  </div>
</template>

According to the documentation, I should bind the Field to the rendered input via a scoped slot.

But in the console I am getting the following error

TypeError: Cannot read properties of undefined (reading 'field')

Can you help me find the issue? Thanks

Answer 1

I simply was missing a global import for the Field object.