Vue Form Builder

A flexible Vue 3 form builder with schema-based form generation.

Installation

npm install vue-form-builder-kite

Requirements

• Vue 3.x

Note: TailwindCSS styles are pre-bundled in the library. You don't need to install or configure TailwindCSS in your project.

Usage

Plugin Installation

import { createApp } from 'vue'
import { FormBuilderPlugin } from 'vue-form-builder-kite'
import 'vue-form-builder-kite/style.css'

const app = createApp(App)
app.use(FormBuilderPlugin)
app.mount('#app')

Basic Usage

<script setup>
import { ref } from 'vue'

const schema = [
  { 
    type: 'text', 
    label: 'Name', 
    model: 'name',
    required: true 
  },
  { 
    type: 'select', 
    label: 'Role', 
    model: 'role',
    options: [
      { value: 'admin', label: 'Admin' },
      { value: 'user', label: 'User' }
    ]
  }
]

const form = ref({})
</script>

<template>
  <FieldRenderer 
    v-for="field in schema" 
    :key="field.model" 
    :field="field" 
    v-model="form" 
  />
</template>

Individual Components

<template>
  <FormText label="Name" v-model="form.name" />
  <FormSelect 
    label="Role" 
    :options="options" 
    v-model="form.role" 
  />
  <FormMultiSelect 
    label="Hobbies" 
    :options="hobbies" 
    v-model="form.hobbies" 
  />
</template>

Composables

import { useForm } from 'vue-form-builder-kite'

const { form } = useForm(schema)

Features

• Schema-based form generation
• Built-in field types: Text, Select, MultiSelect
• Validation rules support (number, min, max)
• Customizable styling with TailwindCSS
• TypeScript support

Field Types

Text Field

{
  type: 'text',
  label: 'Name',
  model: 'name',
  required: true,
  placeholder: 'Enter name',
  rules: ['min:3', 'max:50']
}

Select Field

{
  type: 'select',
  label: 'Role',
  model: 'role',
  required: true,
  options: [
    { value: 'admin', label: 'Admin' },
    { value: 'user', label: 'User' }
  ]
}

MultiSelect Field

{
  type: 'multiselect',
  label: 'Hobbies',
  model: 'hobbies',
  required: true,
  search: true,
  options: ['Reading', 'Writing', 'Sports']
}

License

MIT