0
# VueUse Integrations
1

2
VueUse Integrations provides Vue.js composition API wrappers for popular utility libraries, enabling seamless integration of third-party tools like Axios, Fuse.js, SortableJS, and others into Vue applications. It offers reactive composables that bridge external libraries with Vue's reactivity system, providing consistent, reactive interfaces for diverse functionality ranging from HTTP requests and fuzzy search to cookie management and form validation.
3

4
## Package Information
5

6
- **Package Name**: @vueuse/integrations
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @vueuse/integrations`
10
- **Vue Version**: Requires Vue 3.5.0+
11

12
## Core Imports
13

14
```typescript
15
// Import specific integrations
16
import { useAxios, useFuse, useCookies } from "@vueuse/integrations";
17

18
// Import individual integrations
19
import { useAxios } from "@vueuse/integrations/useAxios";
20
import { useFuse } from "@vueuse/integrations/useFuse";
21
```
22

23
For CommonJS:
24

25
```javascript
26
const { useAxios, useFuse, useCookies } = require("@vueuse/integrations");
27
```
28

29
## Basic Usage
30

31
```typescript
32
import { useAxios, useFuse, useCookies } from "@vueuse/integrations";
33

34
// HTTP requests with Axios
35
const { data, isLoading, error } = useAxios('https://api.example.com/users');
36

37
// Fuzzy search with Fuse.js
38
const users = ref([{ name: 'John' }, { name: 'Jane' }]);
39
const searchTerm = ref('jo');
40
const { results } = useFuse(searchTerm, users, {
41
  fuseOptions: { keys: ['name'] }
42
});
43

44
// Cookie management
45
const cookies = useCookies(['user-preferences']);
46
cookies.set('theme', 'dark');
47
```
48

49
## Architecture
50

51
VueUse Integrations follows a consistent architecture pattern:
52

53
- **Reactive Wrappers**: Each integration wraps a third-party library with Vue's reactivity system
54
- **Peer Dependencies**: All third-party libraries are optional peer dependencies for tree-shaking
55
- **Consistent API**: All composables follow Vue composition patterns with reactive refs and computed values
56
- **Automatic Cleanup**: Proper cleanup on component unmount to prevent memory leaks
57
- **TypeScript Support**: Full type safety with generic type parameters for customization
58
- **SSR Compatibility**: Server-side rendering support where applicable
59

60
## Capabilities
61

62
### HTTP Client Integration
63

64
HTTP request management using Axios with reactive state and automatic cleanup.
65

66
```typescript { .api }
67
function useAxios<T = any, R = AxiosResponse<T>, D = any>(
68
  url: string,
69
  config?: AxiosRequestConfig<D>,
70
  options?: UseAxiosOptions
71
): UseAxiosReturn<T, R, D> & Promise<UseAxiosReturn<T, R, D>>;
72
```
73

74
[HTTP Client](./http-client.md)
75

76
### Search and Data Processing
77

78
Fuzzy search capabilities and string case transformations for data processing.
79

80
```typescript { .api }
81
function useFuse<DataItem>(
82
  search: MaybeRefOrGetter<string>,
83
  data: MaybeRefOrGetter<DataItem[]>,
84
  options?: MaybeRefOrGetter<UseFuseOptions<DataItem>>
85
): UseFuseReturn<DataItem>;
86

87
function useChangeCase(
88
  input: MaybeRefOrGetter<string>,
89
  type: MaybeRefOrGetter<ChangeCaseType>,
90
  options?: MaybeRefOrGetter<Options>
91
): ComputedRef<string>;
92
```
93

94
[Search and Data Processing](./search-data.md)
95

96
### Storage and State Management
97

98
Persistent storage solutions using cookies, IndexedDB, and JWT token handling.
99

100
```typescript { .api }
101
function useCookies(
102
  dependencies?: string[] | null,
103
  options?: UseCookiesOptions,
104
  cookies?: Cookie
105
): UseCookiesReturn;
106

107
function useIDBKeyval<T>(
108
  key: IDBValidKey,
109
  initialValue: MaybeRefOrGetter<T>,
110
  options?: UseIDBOptions<T>
111
): UseIDBKeyvalReturn<T>;
112

113
function useJwt<Payload extends object = JwtPayload, Header extends object = JwtHeader>(
114
  encodedJwt: MaybeRefOrGetter<string>,
115
  options?: UseJwtOptions<any>
116
): UseJwtReturn<Payload, Header>;
117
```
118

119
[Storage and State Management](./storage-state.md)
120

121
### Form Validation
122

123
Async form validation using async-validator with reactive validation state.
124

125
```typescript { .api }
126
function useAsyncValidator(
127
  value: MaybeRefOrGetter<Record<string, any>>,
128
  rules: MaybeRefOrGetter<Rules>,
129
  options?: UseAsyncValidatorOptions
130
): UseAsyncValidatorReturn & PromiseLike<UseAsyncValidatorReturn>;
131
```
132

133
[Form Validation](./form-validation.md)
134

135
### UI Interactions
136

137
User interface enhancements including drag-and-drop sorting and focus management.
138

139
```typescript { .api }
140
function useSortable<T>(
141
  selector: string,
142
  list: MaybeRef<T[]>,
143
  options?: UseSortableOptions
144
): UseSortableReturn;
145

146
function useFocusTrap(
147
  target: MaybeRefOrGetter<Arrayable<MaybeRefOrGetter<string> | MaybeComputedElementRef>>,
148
  options?: UseFocusTrapOptions
149
): UseFocusTrapReturn;
150
```
151

152
[UI Interactions](./ui-interactions.md)
153

154
### Visual Effects and Progress
155

156
Drawing, progress indication, and QR code generation for enhanced user experience.
157

158
```typescript { .api }
159
function useDrauu(
160
  target: MaybeComputedElementRef,
161
  options?: UseDrauuOptions
162
): UseDrauuReturn;
163

164
function useNProgress(
165
  currentProgress?: MaybeRefOrGetter<number | null | undefined>,
166
  options?: UseNProgressOptions
167
): UseNProgressReturn;
168

169
function useQRCode(
170
  text: MaybeRefOrGetter<string>,
171
  options?: QRCode.QRCodeToDataURLOptions
172
): ShallowRef<string>;
173
```
174

175
[Visual Effects and Progress](./visual-effects.md)
176

177
## Vue Components
178

179
Three integrations provide Vue components for declarative usage:
180

181
- **UseAsyncValidator**: Declarative form validation component
182
- **UseFocusTrap**: Focus management component wrapper
183
- **UseSortable**: Drag-and-drop sortable component
184

185
All components follow the render function pattern and accept the same options as their composable counterparts.
186

187
## Common Types
188

189
```typescript { .api }
190
// Utility types used across multiple integrations
191
type MaybeRef<T> = T | Ref<T>;
192
type MaybeRefOrGetter<T> = T | Ref<T> | ComputedRef<T> | (() => T);
193
type MaybeComputedElementRef = MaybeRefOrGetter<Element | ComponentPublicInstance | undefined | null>;
194
type Arrayable<T> = T | T[];
195

196
// Configuration interfaces
197
interface ConfigurableFlush {
198
  flush?: 'pre' | 'post' | 'sync';
199
}
200

201
interface ConfigurableDocument {
202
  document?: Document;
203
}
204
```