A quick start project that shows how to customize and interact with the Syncfusion Vue Query Builder component UI in a Vue project. This project contains simple code to lock, clone, and drag-and-drop groups and rules; set the maximum group count; and set rule validations. It also contains code to change display modes, the summary view, and separate connectors.
Watch the video: https://www.syncfusion.com/tutorial-videos/vue/query-builder?title=how-to-customize-and-interact-with-vue-query-builder-ui
Refer to the following documentation to learn about the Vue Query Builder component: https://ej2.syncfusion.com/vue/documentation/query-builder/lock-group-rule
Check out this online example of the Vue Query Builder component: https://ej2.syncfusion.com/vue/demos/#/material3/query-builder/lock-group.html
Before working on this project, make sure you have the latest versions of Node.js and Visual Studio Code on your machine.
To run this application, you need to clone the How-to-Customize-and-Interact-with-Vue-Query-Builder-UI repository and open it in Visual Studio Code. Then, you can install all the necessary Vue packages in your project using the npm install command and run your project using the npm run dev command.