Vue Truncate by Line (vue-clamp)

Sep 27, 2020


  • Tested to work on Vue v2, Vue v3 and Nuxt.js
  • Support both truncate only or truncate with toggle (more or less)


npm i --save vue-clamp

For Nuxt.js, edit nuxt.config.js

export default {  build: {    transpile: ['vue-clamp', 'resize-detector']  },}

Truncate only

<template>  <div>    <v-clamp :max-lines="2" autoresize>{{ description }}</v-clamp>  </div></template><script>import VClamp from 'vue-clampexport default {  data() {    return {      description: "The cactus wren (Campylorhynchus brunneicapillus) is a large wren that is endemic to the deserts of the United States and Mexico. It is the state bird of Arizona. The wren's upperparts are brown with black and white spots and the underparts are cinnamon-buff with a whiter breast; it has striking white eyebrows. The song is loud and raspy. Cactus wrens are ground feeders and eat mainly insects, with some plant material; they can meet their water needs from their diet."    }  }  components: {    VClamp  }}</script>

NOTE: Make sure the parent of v-clamp is not <p>, as <p> can't hold other tags (will trigger The client-side rendered virtual DOM tree is not matching server-rendered content.). If you need v-clamp to be <p>, use tag="p".

Truncate with Toggle

<v-clamp :max-lines="2" autoresize >  {{ description }}  <template #after="{ toggle, expanded, clamped }">    <a      href="#"      v-if="expanded || clamped"      class="ml-1 badge badge-light"      @click.prevent="toggle"    >{{ expanded ? 'Less' : 'More' }}</a>  </template></v-clamp>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.