FormPropType

This type is useful for dividing form components. This type is used with functions that return a form.

vue

<template>
  <div>
    Name: <input type="text" v-model="$props.userForm.name.$value" />
    Email: <input type="email" v-model="$props.userForm.email.$value" />
  </div>
  <div>
    <a :href="`mailto:${userForm.email.$value}`">{{ userForm.name.$value }}</a>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import type { FormPropType } from "vue-yup-form";

import type { generateUserForm } from "../forms";
// const generateUserForm = () => {
//   return defineForm({
//     name: field("", yup.string().required().label("Name")),
//     email: field("", yup.string().email().required().label("Email"))
//   });
// };

export default defineComponent({
  name: "UserForm",
  props: {
    userForm: {
      type: Object as FormPropType<typeof generateUserForm>,
      required: true,
    },
  },
});
</script>

TIP

If you want to use <script setup lang="ts"> and define props with pure types via a generic type argument, use ReturnType as follows:

vue

<script setup lang="ts">
defineProps<{
  userForm: ReturnType<typeof generateUserForm> & { $key: number };
}>();
</script>

WARNING

Note that components using this type are in violation of vue/no-mutating-props. To avoid vue/no-mutating-props, prepend $props. in v-model.

vue

<template>
  <input type="text" v-model="$props.userForm.name.$value" />
</template>

FormPropType ​

FormPropType