---
title: "useFilter"
description: "Locale-Aware string filtering"
canonical_url: "https://vinicunca.dev/akar/utilities/use-filter"
---
# useFilter

> Locale-Aware string filtering

`useFilter` provides utility functions for performing locale-aware string filtering using Intl.Collator. It ensures proper Unicode handling and allows customization via Intl.CollatorOptions.

## Options

You can customize the behavior using `Intl.CollatorOptions`. See [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator#options) for more details.

```ts
const { startsWith } = useFilter({ sensitivity: 'base' });
console.log(startsWith('Résumé', 'resume')); // true (case-insensitive)
```

## Usage

### Example Usage

```ts
import { useFilter } from 'akar';

const { startsWith, endsWith, contains } = useFilter();

console.log(startsWith('hello', 'he')); // true
console.log(endsWith('hello', 'lo')); // true
console.log(contains('hello', 'ell')); // true
```

## Using `useFilter` in a Vue Component

```vue
<script setup>
import { useFilter } from 'akar';
import { ref } from 'vue';

const { contains } = useFilter();
const searchQuery = ref('');
const items = ref(['Apple', 'Banana', 'Cherry', 'Date']);

const filteredItems = computed(() =>
  items.value.filter((item) => contains(item, searchQuery.value))
);
</script>

<template>
  <div>
    <input
      v-model="searchQuery"
      placeholder="Search..."
    >
    <ul>
      <li
        v-for="item in filteredItems"
        :key="item"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>
```


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.