vueuc

library0.4.65jsnpmunverified

vueuc is a collection of essential utility components designed for Vue 3 applications, currently at version 0.4.65. This library provides specialized components such as `VBinder` for advanced element positioning and tracking, `VVirtialList` for efficient rendering of large datasets with variable-height items, `VXScroll` for horizontal scrolling via vertical mouse wheel input, and `VResizeObserver` for observing element dimension changes. The library's development and maintenance are primarily driven by a single developer, as explicitly stated in the README, which implies a potentially less formal release cadence and documentation style. Its key differentiator lies in offering low-level UI utilities focused on specific interaction patterns and performance optimizations (like virtualization), distinguishing it from broader UI component libraries. Users should note that detailed API documentation might be sparse, often requiring consultation of the source code.

web-framework

npm install vueuc

package ↗

INSTALL

IMPORT

SIG · VUEUC

vueuc

web-frameworkjavascriptv0.4.65

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VBinder

✓ import { VBinder } from 'vueuc';

✗ import VBinder from 'vueuc';

Components are exported as named exports. Vue 3 components are typically used directly in the template after import.

VVirtialList

✓ import { VVirtialList } from 'vueuc';

✗ const VVirtialList = require('vueuc');

This library is designed for modern JavaScript environments and ships with ESM exports and TypeScript types. CommonJS `require` is not the recommended or idiomatic way to import.

VResizeObserver

✓ import { VResizeObserver } from 'vueuc';

✗ import { ResizeObserver } from 'vueuc';

Ensure correct component capitalization (`VResizeObserver`) as exported by the library, not the native DOM API name.

Demonstrates the usage of `VBinder`, `VTarget`, and `VFollower` for element positioning, along with `VVirtialList` for rendering a large, scrollable list efficiently in a Vue 3 component using `<script setup>`.

<template> <div style="height: 200px; padding: 50px; border: 1px solid #ccc;"> <p>Target element below:</p> <v-binder> <v-target> <div ref="targetEl" style="width: 100px; height: 50px; background-color: lightblue; text-align: center; line-height: 50px;"> Target </div> </v-target> <v-follower :show="true" placement="bottom-start" :overlap="true" :width="100"> <div style="background-color: lightcoral; padding: 10px; border: 1px solid red;"> Follower content <br> (Bottom-start) </div> </v-follower> <v-follower :show="true" placement="top-end" :overlap="true" :width="100"> <div style="background-color: lightgreen; padding: 10px; border: 1px solid green;"> Follower content <br> (Top-end) </div> </v-follower> </v-binder> <p style="margin-top: 20px;">Scroll down to see virtual list example.</p> </div> <div style="height: 300px; border: 1px solid #eee; margin-top: 20px;"> <h3 style="margin: 0; padding: 10px;">Virtual List Example</h3> <v-virtual-list :items="items" :item-height="50" :height="250" style="border: 1px solid blue; overflow: auto;" > <template #default="{ item, index }"> <div :key="item.id" style="height: 50px; display: flex; align-items: center; padding-left: 10px; border-bottom: 1px solid #f0f0f0;"> Item {{ item.text }} - {{ index }} </div> </template> </v-virtual-list> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { VBinder, VTarget, VFollower, VVirtialList } from 'vueuc'; const targetEl = ref<HTMLElement | null>(null); const items = Array.from({ length: 1000 }, (_, i) => ({ id: i, text: `Content for item ${i}`, })); </script> <style> body { margin: 0; font-family: sans-serif; } </style>

Debug

Known issues

gotchaThe official README explicitly states the author is 'too lazy to write' detailed API documentation, implying users will need to consult the source code for full API usage and behavior. This can make initial adoption and debugging more challenging.

fix

Allocate time for source code review for detailed API understanding. Consider contributing to documentation if using in a large project.

affects: >=0.1.0

breakingAs the library is pre-1.0 (currently 0.4.65) and maintained by a single developer for personal use, breaking changes may occur more frequently without following semantic versioning strictly, potentially affecting minor version updates.

fix

Pin exact versions (`"vueuc": "0.4.65"`) in `package.json` to prevent unexpected breaking changes on update. Review changelog or commit history thoroughly before upgrading.

affects: >=0.1.0

gotchaThe components like `VBinder` and `VFollower` require careful setup of `v-target` and `v-follower` within a `v-binder` scope. Misconfiguration can lead to elements not positioning correctly or failing to appear.

fix

Always wrap a single `v-target` and one or more `v-follower` components within `v-binder`. Pay close attention to `placement` and `show` props on `v-follower`.

affects: >=0.1.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: v-binder

The `VBinder` component (or other vueuc components) was used in a Vue template without being properly imported and registered in the current component scope.

fix

Ensure `import { VBinder } from 'vueuc';` is present in the `<script setup>` block, or explicitly registered in the `components` option of a standard Vue component.

Peer dependency 'vue@^3.0.11' not installed.

The `vueuc` package requires Vue 3 as a peer dependency, but a compatible version is not installed in the project.

fix

Install a compatible version of Vue 3: `npm install vue@^3.0.11` or `yarn add vue@^3.0.11`.

Upgrade

Version history

0.4.65latest on npm

Audit

Dependencies

vuerequiredVue 3 is a peer dependency, required for all components.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vueuc ↗