Vue
Vue 3 components and Composition API snippets
useFetch Composable
A simple data fetching composable with loading state and error handling
import { ref, type Ref } from 'vue';
interface UseFetchReturn<T> {
...useDebounce Composable
A composable for debouncing function calls with configurable delay
import { ref, watch, type Ref } from 'vue';
interface UseDebounceOptions {
...useStorage Composable
Reactive local/session storage with automatic serialization/deserialization
import { ref, watch, type Ref } from 'vue';
type StorageType = 'localStorage' | 'sessionStorage';
...useInfiniteScroll Composable
Composable for infinite scroll functionality with intersection observer
import { ref, onMounted, onUnmounted, type Ref } from 'vue';
interface UseInfiniteScrollOptions {
...useWindowSize Composable
Reactive window size with debounced resize events
import { ref, onMounted, onUnmounted } from 'vue';
interface WindowSize {
...useFormValidation Composable
Simple form validation composable with custom rules and error messages
import { ref, type Ref } from 'vue';
type ValidationRule<T> = (value: T) => string | null;
...useCountdown Composable
Reactive countdown timer with start/pause/reset functionality
import { ref, onUnmounted } from 'vue';
interface CountdownReturn {
...useDarkMode Composable
Reactive dark mode toggle with system preference detection and localStorage persistence
import { ref, watch, onMounted, onUnmounted } from 'vue';
type ThemeMode = 'light' | 'dark' | 'system';
...useCopyToClipboard Composable
Composable for copying text to clipboard with success/error states and fallback for older browsers
import { ref, type Ref } from 'vue';
export function useCopyToClipboard() {
...useTaskQueue Composable
Composable for managing sequential execution of async tasks with concurrency control
import { ref, onUnmounted } from 'vue';
type Task<T = void> = () => Promise<T>;
...useElementSize Composable
Reactive element size monitoring using ResizeObserver with cleanup
import { ref, onMounted, onUnmounted, type Ref } from 'vue';
interface ElementSize {
...useClickOutside Composable
Detect clicks outside a target element with cleanup and event options
import { onMounted, onUnmounted, type Ref } from 'vue';
export function useClickOutside(
...useMediaQuery Composable
Reactive media query matching with automatic cleanup
import { ref, onMounted, onUnmounted } from 'vue';
export function useMediaQuery(query: string) {
...useAsyncData Composable
Enhanced async data fetching with caching, retry and abort controller
import { ref, type Ref, onUnmounted } from 'vue';
interface UseAsyncDataOptions<T> {
...useRateLimit Composable
Rate limit function calls with configurable interval and max calls
import { ref, onUnmounted } from 'vue';
export function useRateLimit(
...useScrollPosition Composable
Reactive scroll position tracking with debounce and direction detection
import { ref, onMounted, onUnmounted } from 'vue';
interface ScrollPosition {
...useToast Composable
Toast notification system with positioning, auto-dismiss and custom styles
import { ref, type Ref } from 'vue';
type ToastType = 'success' | 'error' | 'warning' | 'info';
...usePermissions Composable
Reactive browser permission checking with request functionality
import { ref, watch, onMounted } from 'vue';
type PermissionName = 'camera' | 'microphone' | 'notifications' | 'geolocation' | 'clipboard-read' | 'clipboard-write';
...useDragDrop Composable
Simple drag and drop functionality with reactive drop zone state
import { ref, onMounted, onUnmounted, type Ref } from 'vue';
export function useDragDrop(
...useInterval Composable
Reactive interval with start/pause/resume/reset functionality and cleanup
import { ref, onUnmounted, type Ref } from 'vue';
export function useInterval(
...useFocusTrap Composable
Accessibility-focused focus trap for modals and dialogs with keyboard navigation
import { ref, onMounted, onUnmounted, type Ref } from 'vue';
export function useFocusTrap(
...useLazyLoad Composable
Reactive lazy loading for images and components with IntersectionObserver
import { ref, onMounted, onUnmounted, type Ref } from 'vue';
export function useLazyLoad(
...useNetworkStatus Composable
Reactive network status monitoring with offline/online detection and speed estimation
import { ref, onMounted, onUnmounted } from 'vue';
interface NetworkStatus {
...useSortable Composable
Reactive array sorting with multiple sort criteria and direction control
import { ref, computed, type Ref } from 'vue';
type SortDirection = 'asc' | 'desc';
...useModal Composable
Reusable modal management with keyboard navigation and backdrop click handling
import { ref, onMounted, onUnmounted, type Ref } from 'vue';
import { useFocusTrap } from './useFocusTrap'; // Reuse focus trap composable
...useDeepWatch Composable
Enhanced deep watch with debounce, immediate execution and cleanup
import { watch, type Ref, type WatchSource, onUnmounted } from 'vue';
export function useDeepWatch<T>(
...usePagination Composable
Reactive pagination logic with page size control and range calculation
import { ref, computed, type Ref } from 'vue';
export function usePagination<T>(
...useKeyboardShortcut Composable
Reactive keyboard shortcut handling with modifier keys and scoped targets
import { ref, onMounted, onUnmounted, type Ref } from 'vue';
type ModifierKey = 'ctrl' | 'shift' | 'alt' | 'meta';
...useClipboardMonitor Composable
Reactive clipboard monitoring with content change detection and permission checks
import { ref, onMounted, onUnmounted } from 'vue';
export function useClipboardMonitor(
...useFormWizard Composable
Multi-step form wizard management with validation and step navigation
import { ref, computed, type Ref } from 'vue';
type StepValidator = () => boolean | Promise<boolean>;
...useGeoLocation Composable
Reactive geolocation tracking with watch position and error handling
import { ref, onUnmounted, type Ref } from 'vue';
interface GeoLocation {
...