Vue Form Generator

Vue Form Generator is a powerful and flexible form creation tool for Vue.js applications. It generates forms from a configuration file and provides different frontend rendering options such as form, tabs, and steps. The tool uses Tailwind CSS and PrimeVue UI component library to create attractive and responsive forms. Additionally, it can retrieve data from a defined API provider. With Vue Form Generator, users can quickly create customized and dynamic forms that seamlessly integrate with their Vue.js applications.

Documentation · View Demo · View Demo (Github) · Report Bug · Request Feature ·

Installation

1. Install npm

    npm install @tony-nz/vue-form-generator

2. Install the following:

• PrimeVue
• TailwindCSS

3. Edit main.js or main.ts

   import { createApp } from "vue";
   import { initPrimeVue } from "@/plugins/primevue";
   import { VueFormGeneratorPlugin } from "@tony-nz/vue-form-generator";
   
   import App from "./App.vue";
   import "./assets/tailwind.css";
   
   const app = createApp(App);
   
   /**
    * Initialize PrimeVue
    */
   initPrimeVue(app);
   
   /**
    * Initialize VueFormGenerator
    */
   app.use(VueFormGeneratorPlugin, {});
   
   app.mount("#app");
   
   export default app;

4. Create plugins/primevue.ts

   import { App } from "vue";
   import PrimeVue from "primevue/config";
   import ConfirmationService from "primevue/confirmationservice";
   import ToastService from "primevue/toastservice";
   
   // directives
   import Tooltip from "primevue/tooltip";
   
   // components
   import Accordion from "primevue/accordion";
   import AccordionTab from "primevue/accordiontab";
   import Button from "primevue/button";
   import Calendar from "primevue/calendar";
   import Checkbox from "primevue/checkbox";
   import Column from "primevue/column";
   import ConfirmDialog from "primevue/confirmdialog";
   import ConfirmPopup from "primevue/confirmpopup";
   import ContextMenu from "primevue/contextmenu";
   import Dialog from "primevue/dialog";
   import Dropdown from "primevue/dropdown";
   import Editor from "primevue/editor";
   import FileUpload from "primevue/fileupload";
   import InputMask from "primevue/inputmask";
   import InputNumber from "primevue/inputnumber";
   import InputText from "primevue/inputtext";
   import InputSwitch from "primevue/inputswitch";
   import Menu from "primevue/menu";
   import Menubar from "primevue/menubar";
   import MultiSelect from "primevue/multiselect";
   import PanelMenu from "primevue/panelmenu";
   import ProgressBar from "primevue/progressbar";
   import RadioButton from "primevue/radiobutton";
   import SelectButton from "primevue/selectbutton";
   import Sidebar from "primevue/sidebar";
   import TabPanel from "primevue/tabpanel";
   import TabView from "primevue/tabview";
   import Textarea from "primevue/textarea";
   import Tree from "primevue/tree";
   
   // styling
   import "primevue/resources/themes/tailwind-light/theme.css";
   // import "../../assets/tailwind-light/theme.css";
   import "primevue/resources/primevue.min.css";
   import "primeicons/primeicons.css";
   
   /**
    * Initialize PrimeVUE component
    * @param app vue instance
    */
   export function initPrimeVue(app: App<Element>) {
     app.use(PrimeVue);
     app.use(ToastService);
     app.use(ConfirmationService);
     app.directive("tooltip", Tooltip);
   
     // register components
     app.component("Accordion", Accordion);
     app.component("AccordionTab", AccordionTab);
     app.component("Button", Button);
     app.component("Calendar", Calendar);
     app.component("Chart", Chart);
     app.component("Checkbox", Checkbox);
     app.component("Column", Column);
     app.component("ConfirmDialog", ConfirmDialog);
     app.component("ConfirmPopup", ConfirmPopup);
     app.component("ContextMenu", ContextMenu);
     app.component("Dialog", Dialog);
     app.component("Dropdown", Dropdown);
     app.component("Editor", Editor);
     app.component("FileUpload", FileUpload);
     app.component("InputMask", InputMask);
     app.component("InputNumber", InputNumber);
     app.component("InputText", InputText);
     app.component("InputSwitch", InputSwitch);
     app.component("Menu", Menu);
     app.component("Menubar", Menubar);
     app.component("MultiSelect", MultiSelect);
     app.component("PanelMenu", PanelMenu);
     app.component("ProgressBar", ProgressBar);
     app.component("RadioButton", RadioButton);
     app.component("SelectButton", SelectButton);
     app.component("Slider", Slider);
     app.component("Sidebar", Sidebar);
     app.component("TabPanel", TabPanel);
     app.component("TabView", TabView);
     app.component("Textarea", Textarea);
     app.component("Tree", Tree);
   }

5. Edit tailwind.config.js

    content: [
      "./index.html",
      "./src/**/*.{vue,js,ts,jsx,tsx}",
      "./node_modules/@tony-nz/vue-form-generator/**/*.{vue,js,ts,jsx,tsx}",
    ],

License

Distributed under the MIT License.

Acknowledgments

• Michael Price

(back to top)