Demos

The Query Builder has been designed with 2 goals in mind: allowing support of arbitrary components for selecting values and easy custom styling.

The following samples demonstrate the capabilities of the library.

Custom Components

The Vue Query Builder may be combined with any library, supporting the v-model API (opens new window).

In the sample below, we're demonstrating usage of 3 different libraries: range selection (vue-range-component), select2 (vue-select) and a date-picker (vue-flatpickr-component).

Theming

Many work has been put into the ability of overriding the styling and markup for making the Query Builder agnostic to various CSS frameworks and responsive. Of course, you'll have to ensure by yourself that Query Builder rules are responsive.

Bootstrap

Query Builder with Bootstrap 4 (opens new window) theme.

Bulma

Query Builder with Bulma (opens new window) theme.

Tailwind CSS

Query Builder with Tailwind CSS (opens new window) theme.