createFilter
A composable for filtering arrays of items based on search queries, supporting both primitive values and complex objects with customizable filtering logic.
Usage
The createFilter composable provides reactive array filtering with multiple modes for different search behaviors. It works with both primitive values and complex objects, and supports filtering by specific keys.
import { ref, shallowRef } from 'vue'
import { createFilter } from '@vuetify/v0'
const query = shallowRef('doe')
const items = ref([
{ name: 'John Doe', age: 30, city: 'New York' },
{ name: 'Jane Doe', age: 25, city: 'Los Angeles' },
{ name: 'Peter Jones', age: 40, city: 'Chicago' },
])
const filter = createFilter({ keys: ['name'] })
const { items: filtered } = filter.apply(query, items)
console.log(filtered.value)
// [
// { name: 'John Doe', age: 30, city: 'New York' },
// { name: 'Jane Doe', age: 25, city: 'Los Angeles' }
// ]Architecture
createFilter provides pure filtering logic with context support:
Reactivity
| Property/Method | Reactive | Notes |
|---|---|---|
query | ShallowRef, updated on each apply() | |
items (from apply) | Computed, filters reactively |
Reactive filtering Both the query and items passed to apply() can be reactive. The filtered result automatically updates when either changes.
Filter Modes
When the query is an array, each mode controls how multiple queries are matched against item values:
| Mode | Behavior | Passes when |
|---|---|---|
some (default) | Iterates all queries and all values | Any query matches any value |
every | Iterates all queries and all values | All queries match all values |
union | Joins values, checks each query | Any query matches the joined string |
intersection | Joins values, checks each query | All queries match the joined string |
some vs union some and union both pass when any query matches, but some checks each value independently while union joins all values into a single string. The difference matters when a match spans multiple fields.
Examples
Live Search with Highlighting
Filter a list of cities by typing a name or country. Matching text is highlighted in the results.
Functions
createFilterContext
(_options?: FilterContextOptions) => ContextTrinity<E>Creates a filter context with dependency injection support.
Options
Properties
Methods
apply
<T extends Z>(query: FilterQuery, items: MaybeRefOrGetter<T[]>) => FilterResult<T>Apply filter to an array of items
Benchmarks
Every operation is profiled across multiple dataset sizes to measure real-world throughput. Each benchmark is assigned a performance tier—good, fast, blazing, or slow—and groups are scored by averaging their individual results so you can spot bottlenecks at a glance. This transparency helps you make informed decisions about which patterns scale for your use case. Learn more in the benchmarks guide.