Get Started

Welcome to the Vue Filter Panel — a flexible and powerful filter component system for Vue 3.
It helps you build interactive and customizable filter UIs using checkboxes, radio buttons, and slot-based content.

Whether you're building product filters, search panels, or custom dashboards — this component makes filtering logic simple and intuitive.

---

InlineFilter (schema-driven filters)

Render fields dynamically based on a schema object:

// schema object
{
  media: { type: 'checkbox', label: 'Media type', options: [...] },
  source: { type: 'radio', label: 'Source', options: [...] }
}

// schema array
[
   {name: 'media', type: 'checkbox', label: 'Media type', options: [...] },
   {name: 'source', type: 'radio', label: 'Source', options: [...] }
]

<Filter :schema="schema" :value="{}" @change="(e)=>e.data"/>

{ "media": [ "is_photo" ] }

Install & Usage

npm i @opengis/filter

import VsFilter from '@opengis/filter'; // default import Filter
import { Filter, FilterField } from '@opengis/filter'; // Component Import

app.use(VsFilter)

Features

• Dynamic schema support — render filters with just a config object
• Composable with slots — insert custom filters into any position
• Reactive — emits change and clear events with current filter state
• Clear filters — built-in UI for clearing selected filters
• Limit & show more — limit visible options with limit prop
• Dark mode ready — pre-styled for light/dark UIs
• Written in TypeScript — full type safety out of the box
• No dependencies — works with any Vue 3 setup

---

Component Reference

• filter item — individual filter item component (checkbox/radio)
• filter component — filter component