vue-form-elle

An easy way to create a form in your Vue3 project with TypeScript support

Usage

<template>
  <FormElleMain 
    v-model="frm"    
    #default="{ isValid }" 
  >
      <FormElleInput       
        type="text"  
        v-model="frm.name"
        required
      />      
         
      <button @click.prevent="create()" :disabled="!isValid">
        Save
      </button>
   
  </FormElleMain>
 </template> 
        
 <script>
  import { ref } from 'vue';
  import { 
      FormElleInput, 
      FormElleMain 
  } from '../components/forms';
  export default {
    name: "MyComponent",
    components: {
      FormElleInput,
      FormElleMain
    },
    async setup() {
      const frm = ref({
        name: "",
      })

      return {
        frm,
      }
    }
  }
</script>       

Builtin Validation using the Javascript Validation API

code

 <FormElleInput   
        type="text"  
        v-model="frm.name"
        required
      />      

output

Custom Validation & Message

code

        <FormElleInput     
          type="text"       
          v-model="frm.name"        
          :validation-custom="{
            foundElle: (value) => ['elle'].includes(value)
          }"
          :validation-message="{
            foundElle: 'Oh no! message contains Elle??'
          }" 
        />

output