Introduction

Welcome to @qnx/vuetify, a Vue.js library designed to simplify the development and management of Vuetify-based forms. By handling form validation, data management, and server communication, @qnx/vuetify helps you reduce code complexity and maintain cleaner, more manageable codebases.

With a suite of specialized components and composables, @qnx/vuetify enhances productivity by streamlining common form-related tasks and making it easy to integrate forms into your Vuetify projects.

Key Features

• Simplified Form Creation: Generate forms with minimal code by using @qnx/vuetify's ready-to-use components, which handle inputs, validation, and submission.
• Integrated Validation: Built-in validation support using @vee-validate and yup, allowing robust and customizable input checks and error handling.
• Data Management: Effortlessly manage form data with intuitive binding, reset, and submission capabilities.
• Seamless API Integration: Easily configure forms to interact with your backend, supporting RESTful and GraphQL APIs.
• Extensible & Customizable: Designed to work seamlessly within the Vuetify ecosystem, with full support for Vuetify styling and custom themes.

Why Choose @qnx/vuetify?

Working with forms can quickly become complex, especially when managing validation, data handling, and server communication. @qnx/vuetify reduces this complexity by:

• Abstracting Common Tasks: Handling form validation, input states, and server communication so you can focus on logic.
• Reducing Boilerplate: Eliminating repetitive code and enhancing readability and maintainability.
• Promoting Consistency: Offering a standardized approach to form handling, making your code easier to understand and maintain.

Example Use Case

Here's a quick example to show how simple form creation is with @qnx/vuetify:

<script setup>
import { VqForm, VqTextField } from "@qnx/vuetify";
import { object, string } from "yup";

let validationSchema = object({
  name: string().required(),
  email: string().required().email(),
});

const initialValues = { name: "User", email: "user@example.com" };
const onSuccess = (res) => {
  console.log("Form submitted:", res);
};
</script>

<template>
  <VqForm
    action="user/create"
    method="POST"
    :validation-schema="validationSchema"
    :initial-values="initialValues"
    @submited-success="onSuccess"
  >
    <VqTextField name="name" label="Name" placeholder="Enter your name" />
    <VqTextField name="email" label="Email" placeholder="Enter your email" />
    <button type="submit">Submit</button>
  </VqForm>
</template>

Next Steps

To start using @qnx/vuetify, continue to the Installation Guide to set up the package and dependencies. Then, check out the Components section for a full list of available form and data components.

Happy coding!