or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

form-validation.mdhttp-client.mdindex.mdsearch-data.mdstorage-state.mdui-interactions.mdvisual-effects.md
tile.json

tessl/npm-vueuse--integrations

Vue.js composition API wrappers for popular utility libraries enabling seamless integration of third-party tools

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vueuse/integrations@13.9.x

To install, run

npx @tessl/cli install tessl/npm-vueuse--integrations@13.9.0

index.mddocs/

VueUse Integrations

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.

Package Information

  • Package Name: @vueuse/integrations
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @vueuse/integrations
  • Vue Version: Requires Vue 3.5.0+

Core Imports

// Import specific integrations
import { useAxios, useFuse, useCookies } from "@vueuse/integrations";

// Import individual integrations
import { useAxios } from "@vueuse/integrations/useAxios";
import { useFuse } from "@vueuse/integrations/useFuse";

For CommonJS:

const { useAxios, useFuse, useCookies } = require("@vueuse/integrations");

Basic Usage

import { useAxios, useFuse, useCookies } from "@vueuse/integrations";

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

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

// Cookie management
const cookies = useCookies(['user-preferences']);
cookies.set('theme', 'dark');

Architecture

VueUse Integrations follows a consistent architecture pattern:

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

Capabilities

HTTP Client Integration

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

function useAxios<T = any, R = AxiosResponse<T>, D = any>(
  url: string,
  config?: AxiosRequestConfig<D>,
  options?: UseAxiosOptions
): UseAxiosReturn<T, R, D> & Promise<UseAxiosReturn<T, R, D>>;

HTTP Client

Search and Data Processing

Fuzzy search capabilities and string case transformations for data processing.

function useFuse<DataItem>(
  search: MaybeRefOrGetter<string>,
  data: MaybeRefOrGetter<DataItem[]>,
  options?: MaybeRefOrGetter<UseFuseOptions<DataItem>>
): UseFuseReturn<DataItem>;

function useChangeCase(
  input: MaybeRefOrGetter<string>,
  type: MaybeRefOrGetter<ChangeCaseType>,
  options?: MaybeRefOrGetter<Options>
): ComputedRef<string>;

Search and Data Processing

Storage and State Management

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

function useCookies(
  dependencies?: string[] | null,
  options?: UseCookiesOptions,
  cookies?: Cookie
): UseCookiesReturn;

function useIDBKeyval<T>(
  key: IDBValidKey,
  initialValue: MaybeRefOrGetter<T>,
  options?: UseIDBOptions<T>
): UseIDBKeyvalReturn<T>;

function useJwt<Payload extends object = JwtPayload, Header extends object = JwtHeader>(
  encodedJwt: MaybeRefOrGetter<string>,
  options?: UseJwtOptions<any>
): UseJwtReturn<Payload, Header>;

Storage and State Management

Form Validation

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

function useAsyncValidator(
  value: MaybeRefOrGetter<Record<string, any>>,
  rules: MaybeRefOrGetter<Rules>,
  options?: UseAsyncValidatorOptions
): UseAsyncValidatorReturn & PromiseLike<UseAsyncValidatorReturn>;

Form Validation

UI Interactions

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

function useSortable<T>(
  selector: string,
  list: MaybeRef<T[]>,
  options?: UseSortableOptions
): UseSortableReturn;

function useFocusTrap(
  target: MaybeRefOrGetter<Arrayable<MaybeRefOrGetter<string> | MaybeComputedElementRef>>,
  options?: UseFocusTrapOptions
): UseFocusTrapReturn;

UI Interactions

Visual Effects and Progress

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

function useDrauu(
  target: MaybeComputedElementRef,
  options?: UseDrauuOptions
): UseDrauuReturn;

function useNProgress(
  currentProgress?: MaybeRefOrGetter<number | null | undefined>,
  options?: UseNProgressOptions
): UseNProgressReturn;

function useQRCode(
  text: MaybeRefOrGetter<string>,
  options?: QRCode.QRCodeToDataURLOptions
): ShallowRef<string>;

Visual Effects and Progress

Vue Components

Three integrations provide Vue components for declarative usage:

  • UseAsyncValidator: Declarative form validation component
  • UseFocusTrap: Focus management component wrapper
  • UseSortable: Drag-and-drop sortable component

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

Common Types

// Utility types used across multiple integrations
type MaybeRef<T> = T | Ref<T>;
type MaybeRefOrGetter<T> = T | Ref<T> | ComputedRef<T> | (() => T);
type MaybeComputedElementRef = MaybeRefOrGetter<Element | ComponentPublicInstance | undefined | null>;
type Arrayable<T> = T | T[];

// Configuration interfaces
interface ConfigurableFlush {
  flush?: 'pre' | 'post' | 'sync';
}

interface ConfigurableDocument {
  document?: Document;
}