Registry / web-framework / vue-clamp

vue-clamp

JSON →
library1.2.0jsnpmunverified

vue-clamp is a collection of Vue 3 components engineered for precise text and content clamping, leveraging actual browser layout measurements rather than estimations. It offers several specialized primitives: `<LineClamp>` for multiline plain text with flexible ellipsis placement, `<RichLineClamp>` for clamping trusted inline HTML while preserving formatting, `<InlineClamp>` for single-line strings with fixed affixes, and `<WrapClamp>` for truncating collections of atomic items. The current stable version is 1.2.0. The library follows a minor release cadence, regularly introducing new features such as advanced ellipsis positioning and enhanced rich text support. A significant differentiator is its reliance on real-time DOM measurements, which ensures accurate truncation where simpler CSS-based methods might fail. It mandates Vue ^3.3.0 as a peer dependency.

web-framework
npm install vue-clamp
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · VUE-CLAMP
V
vue-clamp
web-frameworkjavascriptv1.2.0
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.

LineClamp
✓ import { LineClamp } from 'vue-clamp'
✗ import LineClamp from 'vue-clamp'
Since v1.0.0, vue-clamp exclusively uses named exports. Default imports will fail.
RichLineClamp
✓ import { RichLineClamp } from 'vue-clamp'
✗ const { RichLineClamp } = require('vue-clamp')
The library is primarily designed for ESM environments and Vue 3's SFCs. CommonJS `require` is not officially supported and may lead to issues.
InlineClamp
✓ import { InlineClamp } from 'vue-clamp'
✗ import { InlineClamp } from 'vue-clamp/dist/InlineClamp'
All components are available directly from the main 'vue-clamp' package entry point. Sub-path imports are unnecessary and not recommended.

Demonstrates basic multiline text clamping using `<LineClamp>` with a toggle button to expand/collapse the text.

<script setup lang="ts"> import { ref } from "vue"; import { LineClamp } from "vue-clamp"; const expanded = ref(false); const text = "Ship review-ready notes with browser-fit text truncation and keep the toggle inline."; </script> <template> <LineClamp v-model:expanded="expanded" :text="text" :max-lines="2"> <template #after="{ clamped, expanded, toggle }"> <button v-if="clamped" type="button" @click="toggle"> {{ expanded ? "Less" : "More" }} </button> </template> </LineClamp> </template>
Debug
Known issues
breakingVersion 1.0.0 introduced a hard dependency on Vue 3. Projects using Vue 2 must remain on the `0.x` line of `vue-clamp`.
fix
Upgrade your project to Vue 3 or use a `vue-clamp` version from the `0.x` series for Vue 2 compatibility.
affects: >=1.0.0
breakingThe package no longer provides a default export since v1.0.0. All components must be imported as named exports.
fix
Change `import VueClamp from 'vue-clamp'` to `import { LineClamp, InlineClamp } from 'vue-clamp'` and use named components directly.
affects: >=1.0.0
breakingFor multiline components (e.g., `<LineClamp>`), the source text is now passed via the `text` prop instead of the default slot. The default slot is now reserved for content rendered *inside* the clamped container.
fix
Migrate from `<LineClamp>Some text</LineClamp>` to `<LineClamp :text="someText" />`.
affects: >=1.0.0
breakingThe prop for specifying the root HTML tag for components was renamed from `tag` to `as` in v1.0.0 to align with common Vue 3 conventions.
fix
Update usage from `:tag="'div'"` to `:as="'div'"` for component root element customization.
affects: >=1.0.0
breakingThe `autoresize` prop was removed in v1.0.0. Components now handle resizing automatically using ResizeObserver where supported.
fix
Remove the `autoresize` prop from your component usage. Resizing is now handled internally.
affects: >=1.0.0
gotchaThe `<RichLineClamp>` component renders its `html` prop directly into the DOM. It is crucial to sanitize any untrusted input before passing it to `html` to prevent XSS vulnerabilities.
fix
Ensure all HTML passed to `<RichLineClamp :html="..." />` originates from a trusted source or has been thoroughly sanitized using a library like DOMPurify.
affects: >=1.1.0
Errors
Common errors & fixes
The requested module 'vue-clamp' does not provide an export named 'default'
Attempting to import `vue-clamp` using a default import, but the library only provides named exports since v1.0.0.
fix
Update your import statement from `import VueClamp from 'vue-clamp'` to `import { LineClamp, InlineClamp } from 'vue-clamp'`.
Component is missing template or render function. (in Vue 2 console)
Using a version of `vue-clamp` (v1.x or higher) designed for Vue 3 in a Vue 2 project.
fix
Downgrade `vue-clamp` to a `0.x` version compatible with Vue 2, or upgrade your project to Vue 3.
Property 'text' is missing on type 'Readonly<LineClampProps>' but required in type 'LineClampProps'.
Passing the content to `<LineClamp>` via the default slot instead of the `text` prop, a breaking change introduced in v1.0.0.
fix
Change from `<LineClamp>Your content here</LineClamp>` to `<LineClamp :text="'Your content here'" />`.
Upgrade
Version history
1.2.0latest on npm
Audit
Dependencies
vuerequiredPeer dependency required for all components.
Agent activity
7 hits · last 30 days
node
6
OpenAI (training)
1
Resources
githubhttps://github.com/Justineo/vue-clamp ↗
packagehttps://www.npmjs.com/package/vue-clamp ↗
homepagehttps://vue-clamp.vercel.app/ ↗