Vue Clamp

1.2.0 · active · verified Sun Apr 19

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.

Common errors

```
The requested module 'vue-clamp' does not provide an export named 'default'
```
cause 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)
```
cause 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'.
```
cause 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'" />`.

Warnings

breaking 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`.
Fix: Upgrade your project to Vue 3 or use a `vue-clamp` version from the `0.x` series for Vue 2 compatibility.
breaking The 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.
breaking 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.
Fix: Migrate from `<LineClamp>Some text</LineClamp>` to `<LineClamp :text="someText" />`.
breaking 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.
Fix: Update usage from `:tag="'div'"` to `:as="'div'"` for component root element customization.
breaking The `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.
gotcha 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.
Fix: Ensure all HTML passed to `<RichLineClamp :html="..." />` originates from a trusted source or has been thoroughly sanitized using a library like DOMPurify.

Install

npm install vue-clamp npm
yarn add vue-clamp yarn
pnpm add vue-clamp pnpm

Imports

LineClamp
wrong:
```
import LineClamp from 'vue-clamp'
```
correct:
```
import { LineClamp } from 'vue-clamp'
```
Since v1.0.0, vue-clamp exclusively uses named exports. Default imports will fail.
RichLineClamp
wrong:
```
const { RichLineClamp } = require('vue-clamp')
```
correct:
```
import { RichLineClamp } from '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
wrong:
```
import { InlineClamp } from 'vue-clamp/dist/InlineClamp'
```
correct:
```
import { InlineClamp } from 'vue-clamp'
```
All components are available directly from the main 'vue-clamp' package entry point. Sub-path imports are unnecessary and not recommended.

Quickstart

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>

view raw JSON →