useFilter
A composable for filtering arrays of items based on search queries, supporting both primitive values and complex objects with customizable filtering logic.
Usage
The useFilter 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.
ts
import { ref } from 'vue'
import { useFilter } from '@vuetify/v0'
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 query = ref('doe')
const { items: filtered } = useFilter(query, items, { keys: ['name'] })
console.log(filtered.value)
// [
// { name: 'John Doe', age: 30, city: 'New York' },
// { name: 'Jane Doe', age: 25, city: 'Los Angeles' }
// ]Examples
Live Search
Real-time filtering with highlighted matching terms.
12 of 12 results
New York/USA
8.3MLos Angeles/USA
3.9MLondon/UK
8.8MParis/France
2.2MTokyo/Japan
13.9MSydney/Australia
5.3MToronto/Canada
2.9MBerlin/Germany
3.6MSingapore/Singapore
5.5MDubai/UAE
3.5MSan Francisco/USA
870KAmsterdam/Netherlands
870KArchitecture
useFilter provides pure filtering logic with context support:
The following API details are for the useFilter composable.
Functions
createFilterContext
(_options?: FilterContextOptions) => ContextTrinity<E>Creates a filter context with dependency injection support.
useFilter
(query: FilterQuery, items: MaybeRef<Z[]>, options?: FilterOptions) => FilterResult<Z>A reusable function for filtering an array of items.
useFilterContext
(namespace?: string) => EReturns the current filter context from dependency injection.
Options
Properties
Methods
apply
<T extends Z>(query: FilterQuery, items: MaybeRef<T[]>) => FilterResult<T>Apply filter to an array of items
Benchmarks
| Operation | Throughput | Latency | Margin |
|---|---|---|---|
| Create filter with default options | 32.0M ops/s | 31ns | ± 0.2% |
| Filter 1,000 string primitives with single query | 21.2M ops/s | 47ns | ± 7.9% |
| Filter 10,000 objects with some mode | 21.1M ops/s | 47ns | ± 0.7% |
| Filter 1,000 objects with single key constraint | 20.9M ops/s | 48ns | ± 1.2% |
| Native Array.filter 1,000 objects | 9.9k ops/s | 100.6μs | ± 0.7% |
| Reactive filter: access computed 100 times (1,000 items) | 672 ops/s | 1.49ms | ± 1.0% |
Was this page helpful?