Jalz Form - Dynamic Vue 3 Form Builder

A powerful, flexible, and easy-to-use dynamic form builder for Vue 3 with TypeScript support. Build complex forms with minimal code and get built-in validation, error handling, and beautiful UI components.

Features

✨ Dynamic Form Generation - Create forms from JSON configuration ✅ Validation - Built-in form validation with custom rules 🎨 Customizable Styling - Use Tailwind CSS or custom styles 📱 Responsive Design - Mobile-friendly by default 🔤 Multiple Field Types - Text, Email, Select, Checkbox, Date, Time, and more 🌐 Internationalization Ready - Easy translation support structure 💾 TypeScript Support - Full TypeScript support with type definitions ⚡ Zero Dependencies - Minimal peer dependencies (Vue 3 only)

Installation

npm

npm install @jalzae/vue-form

yarn

yarn add @jalzae/vue-form

pnpm

pnpm add @jalzae/vue-form

Quick Start

Vue 3 Setup

import { createApp } from 'vue'
import App from './App.vue'
import JalzForm from '@jalzae/vue-form'

const app = createApp(App)

app.use(JalzForm)
app.mount('#app')

Basic Usage

<template>
  <div class="form-container">
    <Form
      title="Contact Form"
      :form="formFields"
      :selected="formData"
      submitname="Submit"
      @submit="handleSubmit"
      :isCancel="true"
      actionCancel="cancel"
      @cancel="handleCancel"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Form } from '@jalzae/vue-form'
import type { FormType } from '@jalzae/vue-form'

const formData = ref({
  name: '',
  email: '',
  message: '',
})

const formFields: FormType[] = [
  {
    model: 'name',
    type: 'text',
    label: 'Full Name',
    place: 'Enter your name',
    required: true,
  },
  {
    model: 'email',
    type: 'email',
    label: 'Email Address',
    place: 'Enter your email',
    required: true,
  },
  {
    model: 'message',
    type: 'textarea',
    label: 'Message',
    place: 'Enter your message',
    required: false,
  },
]

const handleSubmit = () => {
  console.log('Form submitted:', formData.value)
}

const handleCancel = () => {
  console.log('Form cancelled')
  formData.value = { name: '', email: '', message: '' }
}
</script>

<style scoped>
.form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
}
</style>

Available Field Types

Text Input

{
  model: 'username',
  type: 'text',
  label: 'Username',
  place: 'Enter username',
  required: true,
  error: '', // Optional error message
  class: 'custom-class', // Optional CSS class
}

Email Input

{
  model: 'email',
  type: 'email',
  label: 'Email',
  place: '[email protected]',
  required: true,
}

Textarea

{
  model: 'message',
  type: 'textarea',
  label: 'Message',
  place: 'Enter your message',
  required: false,
}

Select Dropdown

{
  model: 'category',
  type: 'select',
  label: 'Category',
  place: 'Choose category',
  list: [
    { value: '1', display: 'Category 1' },
    { value: '2', display: 'Category 2' },
  ],
  display: 'display', // Key for display value
  value: 'value', // Key for actual value
}

Checkbox

{
  model: 'terms',
  type: 'bool',
  label: 'I agree to terms',
  required: true,
}

Date Picker

{
  model: 'birthDate',
  type: 'date',
  label: 'Birth Date',
  place: 'Select date',
}

Time Picker

{
  model: 'appointmentTime',
  type: 'timepicker',
  label: 'Appointment Time',
  place: 'Select time',
}

Number Input

{
  model: 'quantity',
  type: 'number',
  label: 'Quantity',
  place: '0',
  required: true,
}

Button Component with Variants

The form includes a customizable Button component with multiple variants and sizes.

Button Variants

<!-- Default (Blue) -->
<Button variant="default">Submit</Button>

<!-- Destructive (Red) -->
<Button variant="destructive">Delete</Button>

<!-- Outline -->
<Button variant="outline">Cancel</Button>

<!-- Secondary (Gray) -->
<Button variant="secondary">Reset</Button>

<!-- Ghost -->
<Button variant="ghost">Skip</Button>

<!-- Link -->
<Button variant="link">Learn More</Button>

<!-- Text Link -->
<Button variant="defaultText">Click Here</Button>

Button Sizes

<!-- Small -->
<Button size="sm">Small</Button>

<!-- Default -->
<Button size="default">Default</Button>

<!-- Large -->
<Button size="lg">Large</Button>

<!-- Icon -->
<Button size="icon">📝</Button>

Custom Styling

<Button
  variant="default"
  class="custom-gradient font-bold"
>
  Styled Button
</Button>

.custom-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
}

Form Props

| Prop | Type | Default | Description | | -------------- | ---------- | -------- | ---------------------------- | | title | String | '' | Form title | | form | FormType[] | [] | Array of form fields | | selected | Object | {} | Form data object | | submitname | String | 'Submit' | Submit button text | | submitclass | String | '' | Custom CSS for submit button | | isCancel | Boolean | false | Show cancel button | | actionCancel | String | '' | Cancel button event name | | disabled | Boolean | false | Disable submit button | | validation | Boolean | false | Enable validation |

Form Events

<Form
  @submit="onFormSubmit"
  @cancel="onFormCancel"
  @update:selected="onFormDataChange"
/>

Nuxt Integration

Installation for Nuxt

npm install @jalzae/vue-form

Create Plugin

Create plugins/jalz-form.ts:

import { defineNuxtPlugin } from '#app'
import JalzForm from '@jalzae/vue-form'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(JalzForm)
})

Update nuxt.config.ts

export default defineNuxtConfig({
  modules: [],
  build: {
    transpile: ['@jalzae/vue-form'],
  },
})

Use in Nuxt Pages

<template>
  <div class="container mx-auto py-8">
    <Form
      title="Nuxt Contact Form"
      :form="formFields"
      :selected="formData"
      @submit="submitForm"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Form } from '@jalzae/vue-form'

const formData = ref({
  name: '',
  email: '',
})

const formFields = [
  {
    model: 'name',
    type: 'text',
    label: 'Name',
    place: 'Enter your name',
    required: true,
  },
  {
    model: 'email',
    type: 'email',
    label: 'Email',
    place: 'Enter your email',
    required: true,
  },
]

const submitForm = async () => {
  try {
    // Send to your API
    const response = await $fetch('/api/contact', {
      method: 'POST',
      body: formData.value,
    })
    console.log('Form submitted:', response)
  } catch (error) {
    console.error('Submission error:', error)
  }
}
</script>

Validation

Add validation rules to form fields:

const formFields = [
  {
    model: 'email',
    type: 'email',
    label: 'Email',
    place: '[email protected]',
    required: true,
    validation: {
      minLength: 5,
      maxLength: 100,
      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    },
  },
]

Custom Styling with Tailwind CSS

<!-- In your tailwind.config.js -->
<script>
export default {
  content: [
    './node_modules/@jalzae/vue-form/**/*.{js,ts,jsx,tsx,vue}',
  ],
  // ... rest of config
}
</script>

Advanced Examples

Dynamic Field Selection

<template>
  <Form
    :form="dynamicFields"
    :selected="formData"
    @submit="handleSubmit"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'

const selectedType = ref('basic')

const dynamicFields = computed(() => {
  if (selectedType.value === 'basic') {
    return basicFields
  }
  return advancedFields
})
</script>

Form Data Binding

<script setup lang="ts">
const formData = ref({
  name: '',
  email: '',
  country: '',
})

const handleDataChange = (newData) => {
  formData.value = newData
}

// Watch for changes
watch(formData, (newVal) => {
  console.log('Form data changed:', newVal)
}, { deep: true })
</script>

Conditional Fields

const formFields = [
  {
    model: 'country',
    type: 'select',
    label: 'Country',
    list: countries,
  },
  {
    model: 'state',
    type: 'select',
    label: 'State',
    list: selectedCountry === 'US' ? usStates : [],
    visible: selectedCountry === 'US',
  },
]

CSS Customization

The component uses Tailwind CSS classes. Override styles by:

/* Override button styles */
:deep(.jalz-form button) {
  border-radius: 8px;
  font-weight: 600;
}

/* Override input styles */
:deep(.jalz-form input) {
  border: 2px solid #e5e7eb;
  transition: border-color 0.2s;
}

:deep(.jalz-form input:focus) {
  border-color: #3b82f6;
}

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

ISC License - see LICENSE file for details

Support

For issues and feature requests, please visit the GitHub Issues page.

Changelog

Version 1.0.0

• Initial release
• Form builder with dynamic fields
• Multiple field types support
• Validation system
• Button component with variants
• Nuxt 3 integration support
• TypeScript support

Related Projects

• Vue 3 Documentation
• Nuxt 3 Documentation
• Tailwind CSS

Made with ❤️ by JALZAE