tessl/npm-vueuse--components

Renderless Vue.js components that expose VueUse composable functionality through declarative template-based interfaces

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@vueuse/components

Name: tessl/npm-vueuse--components
Author: tessl

@vueuse/components provides renderless Vue.js components that expose VueUse composable functionality through declarative template-based interfaces. This package enables developers to access browser APIs, device information, and utilities through components rather than composition functions, making it ideal for template-heavy codebases and scenarios where component-based APIs are preferred over programmatic composables.

Package Information

Package Name: @vueuse/components
Package Type: npm
Language: TypeScript
Installation: npm install @vueuse/components @vueuse/core

Core Imports

import { 
  UseActiveElement, 
  UseMouse, 
  OnClickOutside,
  vOnClickOutside 
} from "@vueuse/components";

For CommonJS:

const { 
  UseActiveElement, 
  UseMouse, 
  OnClickOutside,
  vOnClickOutside 
} = require("@vueuse/components");

Basic Usage

<template>
  <!-- Component usage: exposes reactive data through scoped slots -->
  <UseMouse v-slot="{ x, y }">
    <div>Mouse position: {{ x }}, {{ y }}</div>
  </UseMouse>

  <!-- Component with event emission -->
  <OnClickOutside @trigger="handleClickOutside">
    <div>Click outside this to trigger event</div>
  </OnClickOutside>

  <!-- Directive usage: template-only functionality -->
  <div v-on-click-outside="handleClickOutside">
    Click outside to trigger handler
  </div>
</template>

<script setup>
import { UseMouse, OnClickOutside, vOnClickOutside } from "@vueuse/components";

function handleClickOutside(event) {
  console.log('Clicked outside:', event);
}
</script>

Architecture

@vueuse/components is built around two main patterns:

Renderless Components: Vue components that expose reactive data through default scoped slots, following the renderless component pattern. Most components extend RenderableComponent allowing customization of the wrapper element.
Vue Directives: Template directives that enable declarative usage of VueUse functionality without requiring script setup blocks. Directives accept either handler functions or [handler, options] arrays.

Both patterns provide TypeScript support with full type safety and maintain consistency with their underlying VueUse composables.

Common Types

interface RenderableComponent {
  /**
   * The element that the component should be rendered as
   * @default 'div'
   */
  as?: object | string;
}

interface Position {
  x: number;
  y: number;
}

type PointerType = 'mouse' | 'touch' | 'pen';

Capabilities

Browser Event Handlers

Components and directives for handling browser events like clicks, key presses, and long press gestures.

// Click outside detection
const OnClickOutside: DefineComponent<OnClickOutsideProps>;
const vOnClickOutside: ObjectDirective<HTMLElement>;

// Key stroke handling  
const vOnKeyStroke: ObjectDirective<HTMLElement>;

// Long press detection
const OnLongPress: DefineComponent<OnLongPressProps>;
const vOnLongPress: ObjectDirective<HTMLElement>;

Browser Event Handlers

Element Tracking

Components and directives for tracking element properties like size, position, visibility, and bounding rectangles.

// Element bounding rectangle
const UseElementBounding: DefineComponent<UseElementBoundingProps>;
const vElementBounding: ObjectDirective<HTMLElement>;

// Element size tracking
const UseElementSize: DefineComponent<UseElementSizeProps>;  
const vElementSize: ObjectDirective<HTMLElement>;

// Element visibility in viewport
const UseElementVisibility: DefineComponent<UseElementVisibilityProps>;
const vElementVisibility: ObjectDirective<HTMLElement>;

Element Tracking

Mouse and Pointer

Components and directives for tracking mouse and pointer interactions, positions, and states.

// Mouse position and buttons
const UseMouse: DefineComponent<UseMouseProps>;

// Mouse within element bounds
const UseMouseInElement: DefineComponent<UseMouseInElementProps>;
const vMouseInElement: ObjectDirective<HTMLElement>;

// Mouse button press state
const UseMousePressed: DefineComponent<UseMousePressedProps>;

// Pointer events (mouse/touch/pen)
const UsePointer: DefineComponent<UsePointerProps>;

Mouse and Pointer

Device and Sensors

Components for accessing device information, sensors, and hardware capabilities.

// Battery status
const UseBattery: DefineComponent;

// Device motion sensors
const UseDeviceMotion: DefineComponent;

// Device orientation
const UseDeviceOrientation: DefineComponent;

// Device pixel ratio
const UseDevicePixelRatio: DefineComponent;

// Available media devices
const UseDevicesList: DefineComponent<UseDevicesListProps>;

Device and Sensors

Browser APIs

Components for interacting with various browser APIs like clipboard, geolocation, fullscreen, and media features.

// Clipboard operations
const UseClipboard: DefineComponent<UseClipboardProps>;

// Geolocation data
const UseGeolocation: DefineComponent<UseGeolocationProps>;

// Fullscreen management
const UseFullscreen: DefineComponent<UseFullscreenProps>;

// Eye dropper color picker
const UseEyeDropper: DefineComponent<UseEyeDropperProps>;

Browser APIs

Theme and Preferences

Components for managing color schemes, dark mode, and user preferences.

// Color mode management
const UseColorMode: DefineComponent<UseColorModeProps>;

// Dark mode toggle
const UseDark: DefineComponent<UseDarkProps>;

// System color scheme preference
const UsePreferredColorScheme: DefineComponent;

// Dark mode preference
const UsePreferredDark: DefineComponent;

Theme and Preferences

Window and Document

Components for tracking window and document state, focus, visibility, and dimensions.

// Window dimensions
const UseWindowSize: DefineComponent<UseWindowSizeProps>;

// Window focus state
const UseWindowFocus: DefineComponent;

// Document visibility
const UseDocumentVisibility: DefineComponent;

// Page leave detection
const UsePageLeave: DefineComponent;

Window and Document

Utilities and Advanced

Components for utility functions, time management, virtual scrolling, and other advanced features.

// Current timestamp
const UseTimestamp: DefineComponent<UseTimestampProps>;

// Relative time formatting
const UseTimeAgo: DefineComponent<UseTimeAgoProps>;

// Virtual list rendering
const UseVirtualList: DefineComponent<UseVirtualListProps>;

// Pagination management
const UseOffsetPagination: DefineComponent<UseOffsetPaginationProps>;

Utilities and Advanced

Scroll and Resize Directives

Directives for handling scroll events, resize observations, and scroll locking.

// Scroll event handling
const vScroll: ObjectDirective<HTMLElement>;

// Resize observation
const vResizeObserver: ObjectDirective<HTMLElement>;

// Scroll locking
const vScrollLock: ObjectDirective<HTMLElement>;

// Infinite scroll
const vInfiniteScroll: ObjectDirective<HTMLElement>;

Scroll and Resize Directives