Quite commonly in our applications, we need to create interactive report builders to let users build custom reports and dashboards. This usually involves selecting the metrics, groupings, date ranges, filters, and chart types. To help developers build such interactive components, we’ve created a query builder component in Cube.js client libraries.

We’ve already covered how to use it in the [React client library](https://hackernoon.com/(https://cube.dev/blog/react-query-builder-with-cubejs/), and in this blog post, we’ll talk about using it with Vue.js. The query builder component uses the scoped slots technique and lets developers implement their own render logic. This way it gives maximum flexibility for building a custom-tailored UI with minimal API. Below you can see the demo of the query builder component with Vuetify.

You can find the live demo of the example here and its source code is available on Github.

Setup a Demo Backend

if you already have Cube.js backend up and running you can skip this step.

Let’s start by setting up a database with some sample data. We’ll use PostgreSQL and our example e-commerce dataset for this tutorial. You can download and import it by running the following commands.

$ curl <http://cube.dev/downloads/ecom-dump.sql> > ecom-dump.sql
$ createdb ecom
$ psql --dbname ecom -f ecom-dump.sql

Next, install the Cube.js CLI if you don’t have it already, and create a new project.

$ npm install -g cubejs-cli
$ cubejs create -d postgres vue-query-builder

#vuejs #vue #javascript #tutorial #web-development #programming #programming-top-story #javascript-top-story