Vue Truncate by Line (vue-clamp)

September 27, 2020

vue-clamp

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

Install

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-clamp

export 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>
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.