Vue-uForm

Vue-uForm is an unstyled and flexible form validation library designed specifically for Vue 3, embracing a component-driven design philosophy. This innovative library treats components as fundamental entities, encapsulating all functionalities—including data transfer and form validation—around them.

Key Features

• Compatible with Any UI Component Library: Easily integrate with various UI frameworks without needing to change your app’s existing style.
• Customizable Layout: Tailor the appearance of labels, inputs, help information, and validation messages to fit the specific requirements of your application.
• Global Layout Application: Effortlessly apply consistent layouts across all form fields throughout your application.
• Customizable Submit Button: Modify the submit button to align with the design and functionality of your application.
• Minimal JavaScript/TypeScript Code: Keep most of the logic contained within components, simplifying the overall code structure.
• Built-in and Custom Validation Rules: Utilize extensive built-in validation rules or implement custom rules according to your needs.

Quick Usage

To demonstrate the library, here’s a simple example of how to use Vue-uForm:

<script setup>
// Initialize form values
const formValues = {
  username: "",
  password: "",
};

// Handle form submit event
function doLogin(data) {
  console.log(data);
}
</script>
<template>
  <u-form :values="formValues" @submit="doLogin">
    <u-field
      name="username"
      label="Username"
      validation="required"
      v-slot="{ value, update }"
    >
      <input f-model />
    </u-field>
    <u-field
      name="password"
      label="Password"
      validation="required"
      v-slot="{ value, update }"
    >
      <input type="password" f-model />
    </u-field>
    <u-submit>Login</u-submit>
    <!-- or -->
    <u-submit custom v-slot="{ submit }">
      <button :style="{ color: 'blue' }" @click="submit">Login</button>
    </u-submit>
  </u-form>
</template>

For additional examples and comprehensive documentation, visit the Vue-uForm Documentation.

With Vue-uForm, developers can create powerful, user-friendly forms with ease, ensuring a smooth validation process that enhances the overall user experience.