Vue DnD Forms

A powerful and customizable form builder built with Vue 3, FormKit, FormKit DnD, Shadcn-Vue, and Tailwind CSS v4. This drag-and-drop form builder allows you or your users to create complex forms with a user-friendly interface.

🚀 Features

• Drag and Drop Interface: Build forms by dragging and dropping components
• Form Element Editing: Configure properties, validations, and styling for each form element
• Live Preview: See your form changes in real-time
• Theme Customization: Customize the appearance with Tailwind CSS and FormKit theming
• Responsive Design: Works on all device sizes
• Dark Mode Support: Built-in light and dark mode themes
• Type-Safe: Built with TypeScript

📦 Installation and setup

Note: This is not an NPM package, while the default form builder is somewhat opinionated, I have decided to use the npx cli and copy the files in your src/components directory. You now have full control over the source code and you may update and change this how you see fit.

🛠️ Setup Requirements

Prerequisites

• Node.js (v16 or later)
• Vue 3 project with Vite

Step 1:

You can quickly add this form builder to your Vue 3 project using the following npx command:

1npx @vue-form-forge/cli@latest

This will copy the form builder code into a components/form-builder directory in your project and download any required dependencies

Step 2 - Setup tailwind and css variables:

1npm install tailwindcss @tailwindcss/vite

Add tailwind to your vite.config.ts file:

1import { defineConfig } from "vite";
2import tailwindcss from "@tailwindcss/vite";
3
4export default defineConfig({
5  plugins: [tailwindcss()],
6});

Create a tailwind.config.js file:

1// tailwind.config.js
2module.exports = {
3  content: ["formkit.theme.ts"],
4  purge: [],
5  darkMode: "class",
6  theme: {
7    extend: {},
8  },
9  variants: {
10    extend: {},
11  },
12  plugins: [],
13};

Update your main.css file (or whatever your default styles file is):

NOTE: the css file below contains the variables that are used to theme the ui elements. You do not have to include them, but I would recommend just changing them to whatever color palette your website follows.

1@import "tailwindcss";
2@import "tw-animate-css";
3
4@custom-variant dark (&:is(.dark *));
5@config "../../tailwind.config.js";
6
7@theme inline {
8  --color-background: var(--background);
9  --color-foreground: var(--foreground);
10  --color-card: var(--card);
11  --color-card-foreground: var(--card-foreground);
12  --color-popover: var(--popover);
13  --color-popover-foreground: var(--popover-foreground);
14  --color-primary: var(--primary);
15  --color-primary-foreground: var(--primary-foreground);
16  --color-secondary: var(--secondary);
17  --color-secondary-foreground: var(--secondary-foreground);
18  --color-muted: var(--muted);
19  --color-muted-foreground: var(--muted-foreground);
20  --color-accent: var(--accent);
21  --color-accent-foreground: var(--accent-foreground);
22  --color-destructive: var(--destructive);
23  --color-destructive-foreground: var(--destructive-foreground);
24  --color-border: var(--border);
25  --color-input: var(--input);
26  --color-border-red: var(--border-red);
27  --color-ring: var(--ring);
28  --color-chart-1: var(--chart-1);
29  --color-chart-2: var(--chart-2);
30  --color-chart-3: var(--chart-3);
31  --color-chart-4: var(--chart-4);
32  --color-chart-5: var(--chart-5);
33  --radius-sm: calc(var(--radius) - 4px);
34  --radius-md: calc(var(--radius) - 2px);
35  --radius-lg: var(--radius);
36  --radius-xl: calc(var(--radius) + 4px);
37  --color-sidebar: var(--sidebar);
38  --color-sidebar-foreground: var(--sidebar-foreground);
39  --color-sidebar-primary: var(--sidebar-primary);
40  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
41  --color-sidebar-accent: var(--sidebar-accent);
42  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
43  --color-sidebar-border: var(--sidebar-border);
44  --color-sidebar-ring: var(--sidebar-ring);
45}
46
47:root {
48  --background: oklch(0.99 0.02 145);
49  --foreground: oklch(0.147 0.004 49.25);
50  --card: oklch(1 0 0);
51  --card-foreground: oklch(0.147 0.004 49.25);
52  --popover: oklch(1 0 0);
53  --popover-foreground: oklch(0.147 0.004 49.25);
54  --primary: oklch(0.216 0.006 56.043);
55  --primary-foreground: oklch(0.985 0.001 106.423);
56  --secondary: oklch(0.97 0.001 106.424);
57  --secondary-foreground: oklch(0.216 0.006 56.043);
58  --muted: oklch(0.97 0.001 106.424);
59  --muted-foreground: oklch(0.553 0.013 58.071);
60  --accent: oklch(0.65 0.2 145);
61  --accent-foreground: oklch(0.216 0.006 56.043);
62  --destructive: oklch(0.577 0.245 27.325);
63  --destructive-foreground: oklch(0.577 0.245 27.325);
64  --border: oklch(0.923 0.003 48.717);
65  --border-red: oklch(0.5493 0.131 26.86);
66  --input: oklch(0.923 0.003 48.717);
67  --ring: oklch(72.3% 0.219 149.579);
68  --chart-1: oklch(0.646 0.222 41.116);
69  --chart-2: oklch(0.6 0.118 184.704);
70  --chart-3: oklch(0.398 0.07 227.392);
71  --chart-4: oklch(0.828 0.189 84.429);
72  --chart-5: oklch(0.769 0.188 70.08);
73  --radius: 0.625rem;
74  --sidebar: oklch(0.973 0.036 142.742);
75  --sidebar-foreground: oklch(0.147 0.004 49.25);
76  --sidebar-primary: oklch(0.216 0.006 56.043);
77  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
78  --sidebar-accent: oklch(0.9 0.05 145);
79  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
80  --sidebar-border: oklch(0.923 0.003 48.717);
81  --sidebar-ring: oklch(0.709 0.01 56.259);
82}
83
84.dark {
85  --background: oklch(0.35 0.008 145);
86  --foreground: oklch(0.92 0.003 145);
87  --card: oklch(0.32 0.006 145);
88  --card-foreground: oklch(0.92 0.003 145);
89  --popover: oklch(0.32 0.006 145);
90  --popover-foreground: oklch(0.92 0.003 145);
91  --primary: oklch(0.92 0.003 145);
92  --primary-foreground: oklch(0.216 0.006 56.043);
93  --border-red: oklch(0.5493 0.131 26.86);
94  --secondary: oklch(0.4 0.01 145);
95  --secondary-foreground: oklch(0.92 0.003 145);
96  --muted: oklch(0.38 0.008 145);
97  --muted-foreground: oklch(0.75 0.005 145);
98  --accent: oklch(0.6 0.08 145);
99  --accent-foreground: oklch(0.92 0.003 145);
100  --destructive: oklch(0.396 0.141 25.723);
101  --destructive-foreground: oklch(0.637 0.237 25.331);
102  --border: oklch(0.45 0.01 145);
103  --input: oklch(0.45 0.01 145);
104  --ring: oklch(72.3% 0.15 149.579);
105  --chart-1: oklch(0.488 0.243 264.376);
106  --chart-2: oklch(0.696 0.17 162.48);
107  --chart-3: oklch(0.769 0.188 70.08);
108  --chart-4: oklch(0.627 0.265 303.9);
109  --chart-5: oklch(0.645 0.246 16.439);
110  --sidebar: oklch(0.25 0.008 145);
111  --sidebar-foreground: oklch(0.92 0.003 145);
112  --sidebar-primary: oklch(0.7 0.05 145);
113  --sidebar-primary-foreground: oklch(0.92 0.003 145);
114  --sidebar-accent: oklch(0.5 0.01 145);
115  --sidebar-accent-foreground: oklch(0.92 0.003 145);
116  --sidebar-border: oklch(0.3 0.008 145);
117  --sidebar-ring: oklch(0.6 0.05 145);
118}
119
120@layer base {
121  * {
122    @apply border-border outline-ring/50;
123  }
124  body {
125    @apply bg-background text-foreground;
126  }
127}

Step 3 - Formkit config and theme setup:

Create a formkit.config.ts at the root of your application:

1// formkit.config.ts
2import { rootClasses } from "./formkit.theme.ts";
3import { defaultConfig } from "@formkit/vue";
4
5export default defaultConfig({
6  config: {
7    rootClasses,
8  },
9});

Add the formkit config file to your main.ts application entry point

1import { createApp } from "vue";
2import "./style.css";
3import { plugin, defaultConfig } from "@formkit/vue";
4import App from "./App.vue";
5import config from "../formkit.config";
6
7createApp(App).use(plugin, defaultConfig(config)).mount("#app");

Add a formkit.theme.ts file at the root of your application

This file is very long but contains the styling for all elements that could be rendered by the formkit library. You can either copy and paste the file from the gist I created below, or setup your own theme at https://themes.formkit.com/

Link to formkit.theme.ts file

🚀 Usage

The BuilderProvider.vue file is mainly for easy importing of api keys incase your are running a monorepo setup.

This example is for using an openai api key that allows a user to quickly build a form.

The instructions file for the model can be found in the /form-builder/componenets/ai-prompt directory.

1<script setup lang="ts">
2import {
3  FormBuilder,
4  BuilderProvider,
5  type FormBuilderConfig,
6} from "./components/form-builder/main";
7import { computed } from "vue";
8
9const formBuilderConfig = computed<FormBuilderConfig>(() => ({
10  apiKey: import.meta.env.VITE_MY_OPEN_AI_KEY,
11}));
12</script>
13
14<template>
15  <BuilderProvider :config="formBuilderConfig">
16    <FormBuilder />
17  </BuilderProvider>
18</template>

🤝 Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

📄 License

This project is licensed under the MIT License—see the LICENSE file for details.