UI Thing

Form Builder

Quickly create a form from an array of objects.

Vee-Validate
Nuxt Integration

We all know that building forms can be a pain in the butt. I stumbled on this form builder example in the vee-validate documentation and thought that it would be nice to have one of these here as well.

Getting Started

Setup

To get started, you need to setup Vee Validate in your Nuxt project. You can do so by following the instructions outline in the Forms Introduction page.

Installation

Next, you can install the form builder component by running the following command.

npx ui-thing@latest add vee-form-builder

Use the Form Builder Component

Now you can use the form builder component in your project.

<template>
  <FormBuilder :fields="fields" />
</template>

<script lang="ts" setup>
  import type { FormBuilder } from "@/components/Ui/FormBuilder/FormBuilder.vue";

  const form: FormBuilder[] = [
    {
      variant: "Checkbox",
      name: "rememberMe",
      label: "Remember Me",
      description: "Remember me on this device",
    },
  ];
</script>

Full Example

Here is an example of the component in action.

Do note that you can use the renderIf prop to conditionally render a field.

Also, you can render your own markup by using the name of the prop on the object as the slot name. This is demonstrated in the Conditional & Currency section of the form.

Input

Enter your first name

Enter your last name

Conditional & Currency

We can do this too

Check the box below to conditionally render a field

Enter the full price

Are these items on sale?

DateFields
mm
dd
yyyy

When is your anniversary?

File Input

Only image files are allowed

Only PDF document files are allowed

Selects
TextArea

Enter your message

MultiSelect
Pin Input
Tags Input

Type a brand and press enter to register it

Radio Group
Vueform Slider
Native Checkbox

Forms Introduction

Check out the form elements that are created with the help of Vee-Validate to easily add validation to your Nuxt app.

VeeVueFormSlider

Displays a slider for the user to pick a value from.