Repository files navigation

A quick start project that shows how to customize and interact with the SyncfusionVue 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 theHow-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 thenpm install command and run your project using thenpm run dev command.