0
# Search and Data Processing
1

2
Fuzzy search capabilities and string case transformations for data processing and user interfaces.
3

4
## Capabilities
5

6
### useFuse
7

8
Reactive fuzzy search using Fuse.js with configurable search options.
9

10
```typescript { .api }
11
/**
12
 * Reactive fuzzy search using Fuse.js
13
 * @param search - Search term string
14
 * @param data - Array of data items to search
15
 * @param options - Fuse.js and VueUse configuration options
16
 * @returns Fuse instance and reactive search results
17
 */
18
function useFuse<DataItem>(
19
  search: MaybeRefOrGetter<string>,
20
  data: MaybeRefOrGetter<DataItem[]>,
21
  options?: MaybeRefOrGetter<UseFuseOptions<DataItem>>
22
): {
23
  /** The Fuse.js instance */
24
  fuse: Ref<Fuse<DataItem>>;
25
  /** Reactive search results */
26
  results: ComputedRef<FuseResult<DataItem>[]>;
27
};
28

29
interface UseFuseOptions<T> {
30
  /** Fuse.js configuration options */
31
  fuseOptions?: FuseOptions<T>;
32
  /** Maximum number of results to return */
33
  resultLimit?: number;
34
  /** Return all items when search is empty */
35
  matchAllWhenSearchEmpty?: boolean;
36
}
37

38
// Fuse.js types
39
type FuseOptions<T> = IFuseOptions<T>;
40

41
interface FuseResult<T> {
42
  item: T;
43
  refIndex: number;
44
  score?: number;
45
  matches?: FuseResultMatch[];
46
}
47

48
interface FuseResultMatch {
49
  indices: readonly [number, number][];
50
  value?: string;
51
  refIndex?: number;
52
  key?: string;
53
}
54
```
55

56
**Usage Examples:**
57

58
```typescript
59
import { useFuse } from "@vueuse/integrations/useFuse";
60
import { ref } from 'vue';
61

62
// Basic search
63
const users = ref([
64
  { name: 'John Doe', email: 'john@example.com' },
65
  { name: 'Jane Smith', email: 'jane@example.com' },
66
  { name: 'Bob Johnson', email: 'bob@example.com' }
67
]);
68

69
const searchTerm = ref('john');
70
const { results } = useFuse(searchTerm, users, {
71
  fuseOptions: {
72
    keys: ['name', 'email'],
73
    threshold: 0.4
74
  }
75
});
76

77
// Advanced search with custom options
78
const products = ref([
79
  { title: 'MacBook Pro', category: 'laptop', price: 2000 },
80
  { title: 'iPhone 13', category: 'phone', price: 800 },
81
  { title: 'iPad Air', category: 'tablet', price: 600 }
82
]);
83

84
const query = ref('mac');
85
const { fuse, results } = useFuse(query, products, {
86
  fuseOptions: {
87
    keys: [
88
      { name: 'title', weight: 0.7 },
89
      { name: 'category', weight: 0.3 }
90
    ],
91
    threshold: 0.3,
92
    includeMatches: true,
93
    includeScore: true
94
  },
95
  resultLimit: 10,
96
  matchAllWhenSearchEmpty: true
97
});
98

99
// Access Fuse instance directly
100
console.log(fuse.value.search('laptop'));
101
```
102

103
### useChangeCase
104

105
Reactive string case transformations using change-case library.
106

107
```typescript { .api }
108
/**
109
 * Reactive string case transformations
110
 * @param input - Input string to transform
111
 * @param type - Type of case transformation
112
 * @param options - Additional transformation options
113
 * @returns Reactive transformed string
114
 */
115
function useChangeCase(
116
  input: MaybeRef<string>,
117
  type: MaybeRefOrGetter<ChangeCaseType>,
118
  options?: MaybeRefOrGetter<Options>
119
): WritableComputedRef<string>;
120

121
function useChangeCase(
122
  input: MaybeRefOrGetter<string>,
123
  type: MaybeRefOrGetter<ChangeCaseType>,
124
  options?: MaybeRefOrGetter<Options>
125
): ComputedRef<string>;
126

127
type ChangeCaseType = 
128
  | 'camelCase'     // camelCase
129
  | 'pascalCase'    // PascalCase  
130
  | 'snakeCase'     // snake_case
131
  | 'kebabCase'     // kebab-case
132
  | 'constantCase'  // CONSTANT_CASE
133
  | 'dotCase'       // dot.case
134
  | 'headerCase'    // Header-Case
135
  | 'noCase'        // no case
136
  | 'pathCase'      // path/case
137
  | 'sentenceCase'  // Sentence case
138
  | 'capitalCase';  // Capital Case
139

140
interface Options {
141
  locale?: string | string[];
142
  delimiter?: string;
143
  prefixCharacters?: string;
144
  suffixCharacters?: string;
145
}
146
```
147

148
**Usage Examples:**
149

150
```typescript
151
import { useChangeCase } from "@vueuse/integrations/useChangeCase";
152
import { ref } from 'vue';
153

154
// Basic case transformation
155
const input = ref('hello world example');
156
const caseType = ref('camelCase');
157
const transformed = useChangeCase(input, caseType);
158
// Result: 'helloWorldExample'
159

160
// Multiple transformations
161
const originalText = ref('User Name Field');
162

163
const camelCase = useChangeCase(originalText, 'camelCase');
164
// Result: 'userNameField'
165

166
const snakeCase = useChangeCase(originalText, 'snakeCase');
167
// Result: 'user_name_field'
168

169
const kebabCase = useChangeCase(originalText, 'kebabCase');
170
// Result: 'user-name-field'
171

172
const constantCase = useChangeCase(originalText, 'constantCase');
173
// Result: 'USER_NAME_FIELD'
174

175
// With options
176
const customTransform = useChangeCase(
177
  'hello-world_example',
178
  'camelCase',
179
  { delimiter: '-_' }
180
);
181

182
// Writable computed (first overload)
183
const editableInput = ref('initial text');
184
const writableTransform = useChangeCase(editableInput, 'camelCase');
185
writableTransform.value = 'new text'; // Updates editableInput
186
```