{"id":12417,"library":"vue-clamp","title":"Vue Clamp","description":"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.","status":"active","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/Justineo/vue-clamp","tags":["javascript","clamp","ellipsis","text-overflow","truncate","vue","typescript"],"install":[{"cmd":"npm install vue-clamp","lang":"bash","label":"npm"},{"cmd":"yarn add vue-clamp","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-clamp","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for all components.","package":"vue","optional":false}],"imports":[{"note":"Since v1.0.0, vue-clamp exclusively uses named exports. Default imports will fail.","wrong":"import LineClamp from 'vue-clamp'","symbol":"LineClamp","correct":"import { LineClamp } from 'vue-clamp'"},{"note":"The library is primarily designed for ESM environments and Vue 3's SFCs. CommonJS `require` is not officially supported and may lead to issues.","wrong":"const { RichLineClamp } = require('vue-clamp')","symbol":"RichLineClamp","correct":"import { RichLineClamp } from 'vue-clamp'"},{"note":"All components are available directly from the main 'vue-clamp' package entry point. Sub-path imports are unnecessary and not recommended.","wrong":"import { InlineClamp } from 'vue-clamp/dist/InlineClamp'","symbol":"InlineClamp","correct":"import { InlineClamp } from 'vue-clamp'"}],"quickstart":{"code":"<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { LineClamp } from \"vue-clamp\";\n\nconst expanded = ref(false);\nconst text = \"Ship review-ready notes with browser-fit text truncation and keep the toggle inline.\";\n</script>\n\n<template>\n  <LineClamp v-model:expanded=\"expanded\" :text=\"text\" :max-lines=\"2\">\n    <template #after=\"{ clamped, expanded, toggle }\">\n      <button v-if=\"clamped\" type=\"button\" @click=\"toggle\">\n        {{ expanded ? \"Less\" : \"More\" }}\n      </button>\n    </template>\n  </LineClamp>\n</template>","lang":"typescript","description":"Demonstrates basic multiline text clamping using `<LineClamp>` with a toggle button to expand/collapse the text."},"warnings":[{"fix":"Upgrade your project to Vue 3 or use a `vue-clamp` version from the `0.x` series for Vue 2 compatibility.","message":"Version 1.0.0 introduced a hard dependency on Vue 3. Projects using Vue 2 must remain on the `0.x` line of `vue-clamp`.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Change `import VueClamp from 'vue-clamp'` to `import { LineClamp, InlineClamp } from 'vue-clamp'` and use named components directly.","message":"The package no longer provides a default export since v1.0.0. All components must be imported as named exports.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Migrate from `<LineClamp>Some text</LineClamp>` to `<LineClamp :text=\"someText\" />`.","message":"For 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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Update usage from `:tag=\"'div'\"` to `:as=\"'div'\"` for component root element customization.","message":"The 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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Remove the `autoresize` prop from your component usage. Resizing is now handled internally.","message":"The `autoresize` prop was removed in v1.0.0. Components now handle resizing automatically using ResizeObserver where supported.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure all HTML passed to `<RichLineClamp :html=\"...\" />` originates from a trusted source or has been thoroughly sanitized using a library like DOMPurify.","message":"The `<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.","severity":"gotcha","affected_versions":">=1.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Update your import statement from `import VueClamp from 'vue-clamp'` to `import { LineClamp, InlineClamp } from 'vue-clamp'`.","cause":"Attempting to import `vue-clamp` using a default import, but the library only provides named exports since v1.0.0.","error":"The requested module 'vue-clamp' does not provide an export named 'default'"},{"fix":"Downgrade `vue-clamp` to a `0.x` version compatible with Vue 2, or upgrade your project to Vue 3.","cause":"Using a version of `vue-clamp` (v1.x or higher) designed for Vue 3 in a Vue 2 project.","error":"Component is missing template or render function. (in Vue 2 console)"},{"fix":"Change from `<LineClamp>Your content here</LineClamp>` to `<LineClamp :text=\"'Your content here'\" />`.","cause":"Passing the content to `<LineClamp>` via the default slot instead of the `text` prop, a breaking change introduced in v1.0.0.","error":"Property 'text' is missing on type 'Readonly<LineClampProps>' but required in type 'LineClampProps'."}],"ecosystem":"npm"}