Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long.

It uses @clampy-js/clampy library (a fork of Clamp.js) behind the scene to apply the ellipsis.

It automatically re-clamps itself when the element or the browser window change size.

You can install @clampy-js/vue-clampy using NPM or Yarn:

npm install @clampy-js/vue-clampy 

yarn install @clampy-js/vue-clampy 

<script> import clampy from '@clampy-js/vue-clampy'; import Vue from 'vue'; Vue.use(clampy); export default { name: 'app', directives: { clampy } }; </script> <template> <p v-clampy="3">Long text to clamp here</p> </template> 

You can also override default options globally:

Vue.use(clampy, { truncationChar: '✂️' });