Vue Truncate Readmore

A Vue.js plugin to truncate and expand text content with a customizable read more/less button.

Features

• Truncate text content to a specified number of characters
• Display a customizable read more/less button to support multilanguages
• Activate the plugin based on a minimum character count to prevent truncating short text content
• Smooth auto scrolling to the content when collapsed and outside of the viewport
• Supports Vue 2.x and Vue 3.x JS/TS

Installation

npm install vue-truncate-read-more

or

yarn add vue-truncate-read-more

Usage

Global Registration

In your main.js file:

import { createApp } from 'vue';
import App from './App.vue';
import TruncateReadMore from 'vue-truncate-read-more';

const app = createApp(App);
app.use(TruncateReadMore);
app.mount('#app');

Local Registration

In your Vue component:

import TruncateReadMore from 'vue-truncate-read-more';

export default {
  components: {
    TruncateReadMore
  },
};

Template

In your Vue component’s template:

<truncate-read-more
  :truncate-value="200"
  :only-if-more-than-value="275"
>
  <template #html>
    <div
      v-html="data.html"
    />
  </template>
</truncate-read-more>

or in Vue 3.x you can use pascal case:

<TruncateReadMore
  :truncate-value="200"
  :only-if-more-than-value="275"
>
    <template #html>
        <div
        v-html="data.html"
        />
    </template>
</TruncateReadMore>

As a Wrapper

You can also use the plugin as a wrapper around your content:

<truncate-read-more
  :truncate-value="200"
  :only-if-more-than-value="275"
>
    <template #html>
        <div>
        <!-- Your long content -->
        </div>
    </template>
</truncate-read-more>

Demo link

Stack Blitz Demo

Props

License

MIT

GitHub

View Github