Getting Started

Installation

WARNING

Please be aware of that at least Vue v2.6 is required, due to the new scoped slots features that this library is making use of.

Add the library with either npm or yarn - simply run one of the following commands:

yarn add query-builder-vue
npm install query-builder-vue

You may also use the pre-transpiled dist files from the Unpkg.com CDN - simply add, but don't forget to import Vue too!

<script src="https://unpkg.com/query-builder-vue@latest/dist/query-builder-vue.umd.min.js"></script>

Usage

Getting started with the QueryBuilder is easy. It just requires a minimum configuration.

<template>
  <div id="app">
    <query-builder :config="config" v-model="query"></query-builder>
  </div>
</template>

<script>
import QueryBuilder from "query-builder-vue";

import Input from "./components/Input.vue";
import Number from "./components/Number.vue";

export default {
  components: {
    QueryBuilder
  },
  data() {
    return {
      query: null,

      config: {
        operators: [
          {
            name: "AND",
            identifier: "AND"
          },
          {
            name: "OR",
            identifier: "OR"
          }
        ],
        rules: [
          {
            identifier: "txt",
            name: "Text Selection",
            component: Input,
            initialValue: ""
          },
          {
            identifier: "num",
            name: "Number Selection",
            component: Number,
            initialValue: 10
          }
        ],
      }
    };
  }
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}

#app {
  margin: 30px auto;
  width: 90%;
  border: 1px solid hsl(0, 0%, 75%);
}
</style>