Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/mateenagy/vue-formify below:

mateenagy/vue-formify: Build powerful, type-safe forms in Vue.

Build powerful, type-safe forms in Vue.

VueFormify is a form-building library for Vue that simplifies creating both simple and complex forms. It offers type safety, schema validations and a minimal bundle size (~4kb gzipped), making it both secure and efficient.

• Type Safe: Ensures accurate data types and autocompletion across fields.
• Validation: Use schema based validators like Zod, Valibot or ArkType.
• Auto Collect Values: Seamlessly gathers form data.
• Supports Nested Objects and Arrays: Easily handle complex data structures.
• Easy Third-Party Integrations: Flexible to work with other libraries.
• Customizable Components: Easily build and integrate custom components.
• Lightweight: Small footprint for a faster, more responsive app.

Read more in the documentation

<script lang="ts" setup>
import { useForm } from 'vue-formify';

type FormData = {
  email: string;
}

const {
  Form,
  Field,
  Error,
  handleSubmit,
} = useForm<FormData>();

const sendForm = handleSubmit((data) => {
	console.log(data)
})

</script>

<template>
	<Form @submit="sendForm">
		<Field name="email" />
		<Error error-for="email" />
		<button>Send</button>
	</Form>
</template>

<script lang="ts" setup>
import { type } from 'arktype';
import { useForm } from 'vue-formify';

const { Form, Field, handleSubmit } = useForm({
	schema: type({
		first_name: 'string >= 1';
		last_name: 'string >= 1';
	})
});

const sendForm = handleSubmit((data) => {
	console.log(data);
});

</script>
<template>
	<Form @submit="sendForm">
		<Field name="first_name" />
		<Field name="last_name" />
		<button>Submit</button>
	</Form>
</template>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4