Form Builder

Quickly create a form from an array of objects.

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

First Name *

Enter your first name

Last Name *

Enter your last name

Email *

Password *

Age

Date of Birth

Conditional & Currency

We can do this too

Check the box below to conditionally render a field

Full Price *

Enter the full price

Items on Sale

Are these items on sale?

DateFields

Anniversary

yyyy

When is your anniversary?

File Input

Image Files

Only image files are allowed

Document Files

Only PDF document files are allowed

Selects

Select Only One

Select Multiple

TextArea

Message *

Enter your message

MultiSelect

Select Multiple Tags

Select One Option

Pin Input

Enter your pin

Tags Input

Car Brands

Type a brand and press enter to register it

Radio Group

How would you like to be notified?

Send me emails only

Send me SMS only

Call me

Don't notify me

Vueform Slider

How much do you like Nuxt?

Volume

Native Checkbox

Enable NotificationsReceive notifications on your device

Email NotificationsGet updates via email

SMS NotificationsGet updates via sms

Call NotificationsGet updates via call

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.