How can I make reusable forms in Vue 3?

How can I make reusable forms in Vue 3?

You can create reusable forms in Vue 3 by using components. Define a form component and pass props for customization.

Can you show me an example of a reusable form component?

Sure! Here's a simple example:

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.name" placeholder="Name" />
    <input v-model="formData.email" placeholder="Email" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  props: ['initialData'],
  data() {
    return {
      formData: this.initialData || { name: '', email: '' }
    };
  },
  methods: {
    handleSubmit() {
      this.$emit('submit', this.formData);
    }
  }
};
</script>

How do I handle form validation in this reusable component?

You can add validation logic in the handleSubmit method. Use computed properties or methods to check the validity of formData before emitting the submit event.

What if I want to use this form in multiple places with different data?

You can pass different initialData props to the form component each time you use it, allowing for different data in each instance.