https://github.com/syncfusionexamples/getting-started-with-the-vue-query-builder-component
A quick start project that shows how to create and configure the Syncfusion Vue Query Builder component in a Vue project. This project contains simple code to bind a data source, customize the columns, add rules at initial load, filter Data Grid records using the Query Builder.
https://github.com/syncfusionexamples/getting-started-with-the-vue-query-builder-component
ej2-query-builder filter getting-started grid html5 query-builder query-builder-ui tutorial vue vue-components vue-query-builder vue-ui-components vuejs
Last synced: 3 months ago
JSON representation
A quick start project that shows how to create and configure the Syncfusion Vue Query Builder component in a Vue project. This project contains simple code to bind a data source, customize the columns, add rules at initial load, filter Data Grid records using the Query Builder.
- Host: GitHub
- URL: https://github.com/syncfusionexamples/getting-started-with-the-vue-query-builder-component
- Owner: SyncfusionExamples
- Created: 2024-09-13T10:21:38.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-09-27T05:07:31.000Z (over 1 year ago)
- Last Synced: 2025-02-10T23:51:15.343Z (about 1 year ago)
- Topics: ej2-query-builder, filter, getting-started, grid, html5, query-builder, query-builder-ui, tutorial, vue, vue-components, vue-query-builder, vue-ui-components, vuejs
- Language: Vue
- Homepage: https://www.syncfusion.com/vue-components/vue-query-builder?utm_source=github&utm_medium=listing&utm_campaign=tutorial-videos-vue-query-builder-gettingstarted-sample
- Size: 10.7 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Getting Started with the Vue Query Builder Component
A quick start project that shows how to create and configure the Syncfusion [Vue Query Builder](https://www.syncfusion.com/vue-components/vue-query-builder?utm_source=github&utm_medium=listing&utm_campaign=tutorial-videos-vue-query-builder-gettingstarted-sample) component in a Vue project. This project contains simple code to bind a data source, customize the columns, and add rules at initial load. It also contains code to filter Data Grid records using the Query Builder.
Watch the video: https://www.syncfusion.com/tutorial-videos/vue/query-builder?title=getting-started-with-the-vue-query-builder
Refer to the following documentation to learn about the Vue Query Builder component: https://ej2.syncfusion.com/vue/documentation/query-builder/vue-3-getting-started
Check out this online example of the Vue Query Builder component: https://ej2.syncfusion.com/vue/demos/#/material3/query-builder/default.html
Before working on this project, make sure you have the latest versions of Node.js and Visual Studio Code on your machine.
## How to run this application
To run this application, you need to clone the `Getting-Started-with-the-Vue-Query-Builder-Component` 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.