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
```