Installation and initialization

SVAR Filter is an open-source library distributed under the MIT license.

Installing vue-filter

To install the Vue Filter library, you should run the following command:

//npm
npm install @svar-ui/vue-filter

//yarn
yarn add @svar-ui/vue-filter

Initializing

Import the needed component - FilterBuilder (core component), FilterEditor or FilterBar - and initialize it with its properties. For example, for FilterBuilder fields and options should be defined at the initialization stage.

<script setup>
import { FilterBuilder } from "@svar-ui/vue-filter";

const fields = [
  { id: "first_name", label: "First Name", type: "text" },
  { id: "age", label: "Age", type: "number" },
  { id: "start", label: "Start Date", type: "date", format: "%y-%m-%d" }
];

const options = {
  first_name: [ "Alex", "Adam", "John", "Jane"],
  age: [ 17, 21, 35, 42]
  start: [ new Date(2025, 4, 7), new Date(2025, 4, 10)]
};

</script>

<template>
  <FilterBuilder :fields="fields" :options="options" />
</template>

For the initialization instructions of each component, refer to the corresponding sections: FilterBuilder, FilterEditor, FilterBar.