Getting Started with the Vue Query Builder Component in Vue 2

29 Jul 20266 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion® Vue Query Builder component.

Prerequisites

System requirements for Syncfusion® Vue UI components

Setup the Vue 2 project

Easily set up a Vue 2 application using Vue CLI, which provides a reliable development environment, a streamlined project structure, and optimized builds compared to older setup tools. For detailed steps, refer to the Vue CLI installation instructions.

Note: To create a Vue 2 application using Vue CLI, refer to this documentation for more details.

To create a new Vue 2 application, run the following commands based on your preferred package manager:

npm install -g @vue/cli
vue create quickstart

or

yarn global add @vue/cli
vue create quickstart

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → Default ([Vue 2] babel, eslint)
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Navigate to the project directory:

cd quickstart

Adding Vue Query Builder packages

To install the Query Builder package, use the following command:

npm install @syncfusion/ej2-vue-querybuilder --save

or

yarn add @syncfusion/ej2-vue-querybuilder

Adding CSS reference

Themes for Syncfusion® components can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following command:

npm install @syncfusion/ej2-material3-theme --save

Then add the following CSS reference to the src/App.vue file:

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/query-builder/index.css";
</style>

Adding Query Builder component

The Query Builder code should be added in the src/App.vue file.

<template>
 <div class="control-section">
     <div class="col-lg-12 querybuilder-control">
         <ejs-querybuilder width="70%" :dataSource="dataSource">
             <e-columns>
                 <e-column field='EmployeeID' label='Employee ID' type='number' />
                 <e-column field='FirstName' label='First Name' type='string' />
                 <e-column field='TitleOfCourtesy' label='Title Of Courtesy' type='boolean' :values="values" />
                 <e-column field='Title' label='Title' type='string' />
                 <e-column field='HireDate' label='Hire Date' type='date' format='dd/MM/yyyy' />
                 <e-column field='Country' label='Country' type='string' />
                 <e-column field='City' label='City' type='string' />
             </e-columns>
         </ejs-querybuilder>
     </div>
 </div>
</template>

<script>
  import { QueryBuilderComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-vue-querybuilder';
  // Component registration
  export default {
    name: "App",
    // Declaring component and its directives
    components: {
      "ejs-querybuilder": QueryBuilderComponent,
      "e-columns": ColumnsDirective,
      "e-column": ColumnDirective
    },
    // Bound properties declarations
    data() {
      return {
        dataSource:[
        {
          'EmployeeID': 1,
          'FirstName': 'Nancy',
          'Title': 'Sales Representative',
          'TitleOfCourtesy': 'Ms.',
          'HireDate': '22/07/2001',
          'City': 'Seattle',
          'Country': 'USA'
        },
        {
          'EmployeeID': 2,
          'FirstName': 'Andrew',
          'Title': 'Vice President',
          'TitleOfCourtesy': 'Dr.',
          'HireDate': '21/04/2003',
          'City': 'Tacoma',
          'Country': 'USA'
        },
        {
          'EmployeeID': 3,
          'FirstName': 'Janet',
          'Title': 'Sales Representative',
          'TitleOfCourtesy': 'Ms.',
          'HireDate': '22/07/2001',
          'City': 'Kirkland',
          'Country': 'USA'
        }],
      };
    }
  };
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/query-builder/index.css";
</style>

Run the application

npm run serve

or

yarn run serve

See also