{"id":12646,"library":"vueuc","title":"Vue Utility Components","description":"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.","status":"active","version":"0.4.65","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install vueuc","lang":"bash","label":"npm"},{"cmd":"yarn add vueuc","lang":"bash","label":"yarn"},{"cmd":"pnpm add vueuc","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Vue 3 is a peer dependency, required for all components.","package":"vue","optional":false}],"imports":[{"note":"Components are exported as named exports. Vue 3 components are typically used directly in the template after import.","wrong":"import VBinder from 'vueuc';","symbol":"VBinder","correct":"import { VBinder } from 'vueuc';"},{"note":"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.","wrong":"const VVirtialList = require('vueuc');","symbol":"VVirtialList","correct":"import { VVirtialList } from 'vueuc';"},{"note":"Ensure correct component capitalization (`VResizeObserver`) as exported by the library, not the native DOM API name.","wrong":"import { ResizeObserver } from 'vueuc';","symbol":"VResizeObserver","correct":"import { VResizeObserver } from 'vueuc';"}],"quickstart":{"code":"<template>\n  <div style=\"height: 200px; padding: 50px; border: 1px solid #ccc;\">\n    <p>Target element below:</p>\n    <v-binder>\n      <v-target>\n        <div ref=\"targetEl\" style=\"width: 100px; height: 50px; background-color: lightblue; text-align: center; line-height: 50px;\">\n          Target\n        </div>\n      </v-target>\n      <v-follower :show=\"true\" placement=\"bottom-start\" :overlap=\"true\" :width=\"100\">\n        <div style=\"background-color: lightcoral; padding: 10px; border: 1px solid red;\">\n          Follower content\n          <br>\n          (Bottom-start)\n        </div>\n      </v-follower>\n       <v-follower :show=\"true\" placement=\"top-end\" :overlap=\"true\" :width=\"100\">\n        <div style=\"background-color: lightgreen; padding: 10px; border: 1px solid green;\">\n          Follower content\n          <br>\n          (Top-end)\n        </div>\n      </v-follower>\n    </v-binder>\n    <p style=\"margin-top: 20px;\">Scroll down to see virtual list example.</p>\n  </div>\n\n  <div style=\"height: 300px; border: 1px solid #eee; margin-top: 20px;\">\n    <h3 style=\"margin: 0; padding: 10px;\">Virtual List Example</h3>\n    <v-virtual-list\n      :items=\"items\"\n      :item-height=\"50\"\n      :height=\"250\"\n      style=\"border: 1px solid blue; overflow: auto;\"\n    >\n      <template #default=\"{ item, index }\">\n        <div :key=\"item.id\" style=\"height: 50px; display: flex; align-items: center; padding-left: 10px; border-bottom: 1px solid #f0f0f0;\">\n          Item {{ item.text }} - {{ index }}\n        </div>\n      </template>\n    </v-virtual-list>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { VBinder, VTarget, VFollower, VVirtialList } from 'vueuc';\n\nconst targetEl = ref<HTMLElement | null>(null);\n\nconst items = Array.from({ length: 1000 }, (_, i) => ({\n  id: i,\n  text: `Content for item ${i}`,\n}));\n</script>\n\n<style>\nbody { margin: 0; font-family: sans-serif; }\n</style>","lang":"typescript","description":"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>`."},"warnings":[{"fix":"Allocate time for source code review for detailed API understanding. Consider contributing to documentation if using in a large project.","message":"The 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"As 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.","severity":"breaking","affected_versions":">=0.1.0"},{"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`.","message":"The 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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The `VBinder` component (or other vueuc components) was used in a Vue template without being properly imported and registered in the current component scope.","error":"[Vue warn]: Failed to resolve component: v-binder"},{"fix":"Install a compatible version of Vue 3: `npm install vue@^3.0.11` or `yarn add vue@^3.0.11`.","cause":"The `vueuc` package requires Vue 3 as a peer dependency, but a compatible version is not installed in the project.","error":"Peer dependency 'vue@^3.0.11' not installed."}],"ecosystem":"npm"}